More work on responsive caption

diff --git a/css/app.css b/css/app.css
index bebf27b..b189a29 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6706,29 +6706,29 @@ h2#block-title {
     left: 0;
     float: none;
     margin: 0 auto;
-    top: 10%; }
+    top: 10%;
+    max-height: 250px; }
     @media only screen and (max-width: 40em) {
       #slideshow .nivo-caption {
-        top: 0; } }
+        position: relative; } }
     #slideshow .nivo-caption h6 {
       width: 400px;
       font-weight: bold;
       font-size: 28;
       padding: 0 5px; }
+      @media screen and (max-width: 929px) {
+        #slideshow .nivo-caption h6 {
+          width: auto;
+          background: #000000; } }
     #slideshow .nivo-caption p {
       width: 400px;
       letter-spacing: 0.1em;
       font-size: 18px;
       padding: 0; }
-      @media screen and (max-width: 849px) {
+      @media screen and (max-width: 929px) {
         #slideshow .nivo-caption p {
           width: auto;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          background: #000000;
-          padding: 0 15px;
-          font-size: 1rem; } }
+          background: #000000; } }
     #slideshow .nivo-caption a.button {
       text-transform: uppercase;
       background: transparent;

diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
index 2739d6c..68ec232 100644 (file)
--- a/scss/_slideshow.scss
+++ b/scss/_slideshow.scss
@@ -49,28 +49,28 @@
         float: none;
         margin: 0 auto;
         top: 10%;
+        max-height: 250px;
         @media #{$small-only}{
-            top: 0;
+            position: relative;
         }
         h6 {
             width: 400px;
             font-weight: bold;
             font-size: (28);
             padding: 0 5px;
+            @media screen and (max-width: 929px) {
+                width: auto;
+                background: $black;
+            }
         }
         p {
             width: 400px;
             letter-spacing: 0.1em;
             font-size: 18px;
             padding: 0;
-            @media screen and (max-width: 849px) {
+            @media screen and (max-width: 929px) {
                 width: auto;
-                position: absolute;
-                bottom: 0;
-                left: 0;
                 background: $black;
-                padding: 0 15px;
-                font-size: rem-calc(16);
             }
         }
         a.button {