restructuring caption area

diff --git a/css/app.css b/css/app.css
index b189a29..96ea994 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6700,14 +6700,16 @@ h2#block-title {
           margin-bottom: 15px; } }
   #slideshow .nivo-caption {
     background: transparent;
-    max-width: 1200px;
     position: absolute;
-    right: 0;
-    left: 0;
+    max-width: 500px;
+    left: 20%;
     float: none;
     margin: 0 auto;
     top: 10%;
     max-height: 250px; }
+    @media screen and (max-width: 929px) {
+      #slideshow .nivo-caption {
+        background: #000000; } }
     @media only screen and (max-width: 40em) {
       #slideshow .nivo-caption {
         position: relative; } }
@@ -6718,8 +6720,7 @@ h2#block-title {
       padding: 0 5px; }
       @media screen and (max-width: 929px) {
         #slideshow .nivo-caption h6 {
-          width: auto;
-          background: #000000; } }
+          width: auto; } }
     #slideshow .nivo-caption p {
       width: 400px;
       letter-spacing: 0.1em;
@@ -6727,8 +6728,7 @@ h2#block-title {
       padding: 0; }
       @media screen and (max-width: 929px) {
         #slideshow .nivo-caption p {
-          width: auto;
-          background: #000000; } }
+          width: auto; } }
     #slideshow .nivo-caption a.button {
       text-transform: uppercase;
       background: transparent;

diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
index 68ec232..7ec3cee 100644 (file)
--- a/scss/_slideshow.scss
+++ b/scss/_slideshow.scss
@@ -42,14 +42,16 @@
     }
     .nivo-caption {
         background: transparent;
-        max-width: 1200px;
         position: absolute;
-        right: 0;
-        left: 0;
+        max-width: 500px;
+        left: 20%;
         float: none;
         margin: 0 auto;
         top: 10%;
         max-height: 250px;
+        @media screen and (max-width: 929px) {
+            background: $black; 
+        }
         @media #{$small-only}{
             position: relative;
         }
@@ -60,7 +62,6 @@
             padding: 0 5px;
             @media screen and (max-width: 929px) {
                 width: auto;
-                background: $black;
             }
         }
         p {
@@ -70,7 +71,6 @@
             padding: 0;
             @media screen and (max-width: 929px) {
                 width: auto;
-                background: $black;
             }
         }
         a.button {