removing sticky styles from the mobile and tablet view

fixing the js and styles so that there is enough padding on the main page content in mobile
and tablet view

diff --git a/css/app.css b/css/app.css
index 7701305..2423dc8 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6636,27 +6636,36 @@ main {
   height: 300px; }
 
 @media only screen and (max-width: 40em) {
-  #slideshow {
-    height: 270px; } }
-#slideshow li {
-  list-style: none; }
-  @media only screen and (min-width:40.063em) and (max-width:64em) {
-    #slideshow li {
-      height: 386px; } }
+  .page-inside, .page-front {
+    padding-top: 150px; } }
+@media only screen and (min-width:40.063em) and (max-width:64em) {
+  .page-inside, .page-front {
+    padding-top: 100px; } }
+
+#slideshow {
+  margin-top: 10px; }
   @media only screen and (max-width: 40em) {
-    #slideshow li {
+    #slideshow {
       height: 270px; } }
-  #slideshow li img {
-    max-height: 386px; }
-#slideshow #caption {
-  background: rgba(0, 0, 0, 0.75);
-  color: #FFFFFF;
-  margin-top: -51px; }
-  #slideshow #caption p {
-    padding: 10px 5px;
-    font-size: 12px;
-    margin: 0;
-    text-align: right; }
+  #slideshow li {
+    list-style: none; }
+    @media only screen and (min-width:40.063em) and (max-width:64em) {
+      #slideshow li {
+        height: 386px; } }
+    @media only screen and (max-width: 40em) {
+      #slideshow li {
+        height: 270px; } }
+    #slideshow li img {
+      max-height: 386px; }
+  #slideshow #caption {
+    background: rgba(0, 0, 0, 0.75);
+    color: #FFFFFF;
+    margin-top: -51px; }
+    #slideshow #caption p {
+      padding: 10px 5px;
+      font-size: 12px;
+      margin: 0;
+      text-align: right; }
 
 /* NextGen Gallery */
 .ngg-gallery-thumbnail, .ngg-gallery-thumbnail-box {

diff --git a/header.php b/header.php
index 763350d..e522e19 100644 (file)
--- a/header.php
+++ b/header.php
@@ -17,7 +17,7 @@
       <div class="off-canvas-wrap" data-offcanvas>
         <div class="inner-wrap">
             <div id="page-wrapper">
-                    <header class="sticky">
+                    <header class="sticky fixed">
                         <div class="row collapse">
                             <div id="logo" class="small-12 small-text-center large-text-left large-6 columns">
                                 <a href="<?php bloginfo('url');?>"><img alt="Petoskey.com" src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/petoskey-dot-com-logo.png"></a>

diff --git a/js/app.js b/js/app.js
index e1084a9..327714b 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -53,6 +53,7 @@ $(document).ready(function () {
 
     var slideshow = $("#slideshow");
     var body = $("body");
+    var page = body.find('#page-wrapper main');
     var sticky = $(".sticky");
     var width;
     var page_front = $(".page-front");
@@ -60,8 +61,12 @@ $(document).ready(function () {
     
     if($(window).width() > 1023){
         sticky.addClass("fixed");
-        $(page_front).css("padding-top", "53px");
+       page.css("padding-top", "53px");
 //        $(slideshow).css("margin-top", "20px");
+    } else  if($(window).width() < 1023 && $(window).width() > 640){
+         page.css("padding-top", "100px");
+    } else {
+         page.css("padding-top", "150px");
     }
     
     $(window).resize( function () {
@@ -73,7 +78,7 @@ $(document).ready(function () {
         } else if(width > 639 && width < 1025){
 //            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
-            $(page_front).css("padding-top", "53px");
+            page.css("padding-top", "53px");
 //            $(slideshow).css("margin-top", "20px");
         }
     });
@@ -84,8 +89,10 @@ $(document).ready(function () {
 
 //        if(width > 319 && width < 641 ){
 //            $(page_front).css("padding-top", "200px");
-//        } else if(width > 639 && width < 1025){
-//            $(page_front).css("padding-top", "155px");
+        if(width < 1024){
+            sticky.removeClass("fixed");
+            page.css("padding-top", "0px");
+        }
 //        } else if(width > 1024){
 //            $(page_front).css("padding-top", "65px");
 //            $(slideshow).css("margin-top", "20px");

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 9c1fc26..d830b27 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -44,6 +44,7 @@ $(document).ready(function () {
 
     var slideshow = $("#slideshow");
     var body = $("body");
+    var page = body.find('#page-wrapper main');
     var sticky = $(".sticky");
     var width;
     var page_front = $(".page-front");
@@ -51,8 +52,12 @@ $(document).ready(function () {
     
     if($(window).width() > 1023){
         sticky.addClass("fixed");
-        $(page_front).css("padding-top", "53px");
+       page.css("padding-top", "53px");
 //        $(slideshow).css("margin-top", "20px");
+    } else  if($(window).width() < 1023 && $(window).width() > 640){
+         page.css("padding-top", "100px");
+    } else {
+         page.css("padding-top", "150px");
     }
     
     $(window).resize( function () {
@@ -64,7 +69,7 @@ $(document).ready(function () {
         } else if(width > 639 && width < 1025){
 //            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
-            $(page_front).css("padding-top", "53px");
+            page.css("padding-top", "53px");
 //            $(slideshow).css("margin-top", "20px");
         }
     });
@@ -75,8 +80,10 @@ $(document).ready(function () {
 
 //        if(width > 319 && width < 641 ){
 //            $(page_front).css("padding-top", "200px");
-//        } else if(width > 639 && width < 1025){
-//            $(page_front).css("padding-top", "155px");
+        if(width < 1024){
+            sticky.removeClass("fixed");
+            page.css("padding-top", "0px");
+        }
 //        } else if(width > 1024){
 //            $(page_front).css("padding-top", "65px");
 //            $(slideshow).css("margin-top", "20px");

diff --git a/scss/_main.scss b/scss/_main.scss
index 64cf03f..62f7775 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -189,3 +189,11 @@ main {
     top: 150px;
     height: 300px;
 }
+.page-inside, .page-front{
+    @media#{$small-only}{
+        padding-top: 150px;
+    }
+    @media#{$medium-only}{
+        padding-top: 100px;
+    }
+}
\ No newline at end of file

diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
index c445b54..c85949d 100644 (file)
--- a/scss/_slideshow.scss
+++ b/scss/_slideshow.scss
@@ -1,4 +1,5 @@
 #slideshow {
+    margin-top: 10px;
     @media #{$small-only}{
         height: 270px;
     }