refactor some of the carousel caption stuff to center it and tighten styles up; update carousel template to start to redo mobile first

1 files changed, 7 insertions, 11 deletions

diff --git a/less/carousel.less b/less/carousel.less
index 9816200f4..6d32755ee 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -155,13 +155,14 @@
 // Hidden by default for smaller viewports
 .carousel-caption {
   position: absolute;
-  left: 20%;
-  right: 20%;
+  left: 15%;
+  right: 15%;
   bottom: 20px;
-  display: none;
+  z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #fff;
+  text-align: center;
   text-shadow: 0 1px 2px rgba(0,0,0,.6);
   & .btn {
     text-shadow: none; // No shadow for button elements in carousel-caption
@@ -183,13 +184,8 @@
 
   // Show and left align the captions
   .carousel-caption {
-    left: 0;
-    right: 0;
-    z-index: 10;
-    display: block;
-    max-width: 60%;
-    padding: 30px;
-    margin-left: 0;
-    margin-right: 0;
+    left: 20%;
+    right: 20%;
+    padding-bottom: 30px;
   }
 }