working on responsive slideshow

diff --git a/css/app.css b/css/app.css
index d74d217..f5c80fe 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6546,14 +6546,11 @@ main {
     margin: 0 auto; } }
 
 #services {
-  margin: 70px 0; }
+  margin: 70px 0 50px; }
   #services img {
     display: block;
     float: none;
-    margin: 0 auto; }
-  #services h5 {
-    display: block;
-    text-align: center; }
+    margin: 0 auto 20px; }
 
 main.page-inside .statements {
   margin-bottom: 15px; }
@@ -6668,8 +6665,7 @@ h2#block-title {
     box-shadow: none; }
 
 #slideshow {
-  position: relative;
-  overflow: hidden; }
+  position: relative; }
   #slideshow #cat-text {
     position: absolute;
     top: 10%;
@@ -6710,7 +6706,11 @@ h2#block-title {
     left: 0;
     float: none;
     margin: 0 auto;
-    top: 10%; }
+    top: 10%;
+    overflow: scroll; }
+    @media only screen and (max-width: 40em) {
+      #slideshow .nivo-caption {
+        top: 0; } }
     #slideshow .nivo-caption h6 {
       width: 400px;
       font-weight: bold;
@@ -6728,7 +6728,9 @@ h2#block-title {
           bottom: 0;
           left: 0;
           background: #000000;
-          padding: 0 15px; } }
+          padding: 0 15px;
+          font-size: 1rem;
+          overflow: scroll; } }
     #slideshow .nivo-caption a.button {
       text-transform: uppercase;
       background: transparent;

diff --git a/front-page.php b/front-page.php
index 5c0e48c..f1ff192 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -7,20 +7,20 @@
         <div class="small-12 columns">
             <div id="services" class="row">
                 <div class="small-6 medium-3 columns">
-                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/we-design-and-development.jpg">
-                    <h5>Web Design & Development</h5>
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/we-design-and-development-2.jpg">
+                    
                 </div>
                 <div class="small-6 medium-3 columns">
-                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/search-engine--optimization.jpg">
-                    <h5>Search Engine Optimization</h5>
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/search-engine-optimization-2.jpg">
+                    
                 </div>
                 <div class="small-6 medium-3 columns">
-                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/website-hosting.jpg">
-                    <h5>Web Hosting</h5>
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/website-hosting-2.jpg">
+                    
                 </div>
                 <div class="small-6 medium-3 columns">
-                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/email-services.jpg">
-                    <h5>Email Service</h5>
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/email-services-2.jpg">
+                    
                 </div>
             </div>
         </div>

diff --git a/scss/_main.scss b/scss/_main.scss
index 50ab949..504f409 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -38,15 +38,11 @@ a:hover {
     }
 }
 #services {
-    margin: 70px 0;
+    margin: 70px 0 50px;
     img {
         display: block;
         float: none;
-        margin: 0 auto;
-    }
-    h5 {
-        display: block;
-        text-align: center;
+        margin: 0 auto 20px;
     }
 }
 main.page-inside {

diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
index b169e57..1486cdc 100644 (file)
--- a/scss/_slideshow.scss
+++ b/scss/_slideshow.scss
@@ -1,6 +1,5 @@
 #slideshow {
     position: relative;
-    overflow: hidden;
     #cat-text {
         position: absolute;
         top: 10%;
@@ -50,6 +49,10 @@
         float: none;
         margin: 0 auto;
         top: 10%;
+        overflow: scroll;
+        @media #{$small-only}{
+            top: 0;
+        }
         h6 {
             width: 400px;
             font-weight: bold;
@@ -68,6 +71,8 @@
                 left: 0;
                 background: $black;
                 padding: 0 15px;
+                font-size: rem-calc(16);
+                overflow: scroll;
             }
         }
         a.button {