made several styling changes for mobile view

diff --git a/css/app.css b/css/app.css
index 037f792..5d8779b 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -4855,10 +4855,10 @@ h1, h2, h3, h4, h5, h6 {
     line-height: 0; }
 
 h1 {
-  font-size: 2.5625rem; }
+  font-size: 2.3125rem; }
 
 h2 {
-  font-size: 2.4375rem; }
+  font-size: 2.25rem; }
 
 h3 {
   font-size: 1.6875rem; }
@@ -6526,6 +6526,9 @@ main {
   @media only screen and (max-width: 40em) {
     .statements h1 img {
       display: none; } }
+  @media only screen and (max-width: 40em) {
+    .statements {
+      padding: 10px 0; } }
 
 #statement-pre-slider {
   display: inline-block;
@@ -6552,6 +6555,9 @@ main {
     display: block;
     float: none;
     margin: 0 auto 20px; }
+  @media only screen and (max-width: 40em) {
+    #services {
+      margin: 40px 0 20px; } }
 
 main.page-inside .statements {
   margin-bottom: 15px; }
@@ -6562,7 +6568,7 @@ main.page-inside #content-wrapper #main-content h1 {
   color: #0568b3; }
   @media only screen and (max-width: 40em) {
     main.page-inside #content-wrapper #main-content h1 {
-      font-size: 2.4375rem; } }
+      font-size: 2.25rem; } }
 main.page-inside #content-wrapper #main-content h2 {
   font-size: 1.5rem;
   letter-spacing: 0.1em;
@@ -6722,14 +6728,16 @@ h2#block-title {
         margin: 0; } }
     #slideshow .nivo-caption h6 {
       width: 450px;
-      font-weight: bold;
-      font-size: 28; }
+      font-weight: bold; }
       @media screen and (max-width: 1024px) {
         #slideshow .nivo-caption h6 {
           margin-bottom: 23px; } }
       @media only screen and (max-width: 40em) {
         #slideshow .nivo-caption h6 {
-          margin-bottom: 18px; } }
+          margin-bottom: 5px;
+          font-size: 1.125rem;
+          white-space: pre-wrap;
+          max-width: 170px; } }
     #slideshow .nivo-caption p {
       width: 450px;
       letter-spacing: 0.1em;
@@ -6757,7 +6765,10 @@ h2#block-title {
         text-decoration: none; }
       @media only screen and (max-width: 40em) {
         #slideshow .nivo-caption a.button {
-          padding: 8px 10px; } }
+          padding: 5px 9px;
+          display: block;
+          font-size: 0.875rem;
+          letter-spacing: normal; } }
 
 /* NextGen Gallery */
 [class*="block-grid-"] > li {

diff --git a/front-page.php b/front-page.php
index 06eea45..ef9a4db 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -50,7 +50,7 @@
             <div class="small-11 medium-5 columns small-centered medium-uncentered small-text-center medium-text-right">
                 <a id="portfolio" href="<?php echo get_permalink(94); ?>"></a>
             </div>
-            <div class="small-11 small-offset-0 medium-5 medium-offset-2 columns small-centered medium-uncentered small-text-center medium-text-left">
+            <div class="small-11 medium-5 medium-offset-2 columns small-centered medium-uncentered small-text-center medium-text-left">
                 <a id="contact-button" href="<?php bloginfo('url');?>/contact-us/"></a>
             </div>
         </div>

diff --git a/scss/_main.scss b/scss/_main.scss
index 8384d87..83e4823 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -15,6 +15,9 @@ a:hover {
             }
         }
     }
+    @media #{$small-only}{
+        padding: 10px 0;
+    }
 }
 #statement-pre-slider {
     display: inline-block;
@@ -44,6 +47,9 @@ a:hover {
         float: none;
         margin: 0 auto 20px;
     }
+    @media #{$small-only}{
+        margin: 40px 0 20px;
+    }
 }
 main.page-inside {
     .statements {
@@ -57,7 +63,7 @@ main.page-inside {
                 letter-spacing: 0.05em;
                 color: $blue;
                 @media #{$small-only}{
-                    font-size: rem-calc(39);
+                    font-size: rem-calc(36);
                 }
             }
             h2 {

diff --git a/scss/_settings.scss b/scss/_settings.scss
index 13e8f8d..9334b94 100644 (file)
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -228,8 +228,8 @@ $h5-font-size: rem-calc(24);
 $h6-font-size: rem-calc(22);
 
 // We use these to control header size reduction on small screens
-$h1-font-reduction: rem-calc(11);
-$h2-font-reduction: rem-calc(9);
+$h1-font-reduction: rem-calc(15);
+$h2-font-reduction: rem-calc(12);
 $h3-font-reduction: rem-calc(5);
 $h4-font-reduction: rem-calc(2);
 $h5-font-reduction: rem-calc(2);

diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
index 2a8ef58..eec6422 100644 (file)
--- a/scss/_slideshow.scss
+++ b/scss/_slideshow.scss
@@ -67,12 +67,16 @@
         h6 {
             width: 450px;
             font-weight: bold;
-            font-size: (28);
+//            font-size: rem-calc(28);
             @media screen and (max-width: 1024px) {
                 margin-bottom: 23px;
             }
             @media #{$small-only}{
-                margin-bottom: 18px;
+                margin-bottom: 5px;
+                font-size: rem-calc(18);
+//                letter-spacing: normal;
+                white-space: pre-wrap;
+                max-width: 170px;
             }
         }
         p {
@@ -103,7 +107,10 @@
                 text-decoration: none;
             }
             @media #{$small-only}{
-                padding: 8px 10px;
+                padding: 5px 9px;
+                display: block;
+                font-size: rem-calc(14);
+                letter-spacing: normal;
             }
         }
     }