making responsive changes

diff --git a/css/app.css b/css/app.css
index 310ee35..f938a08 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6470,7 +6470,7 @@ header {
       width: 100%;
       min-width: 900px;
       max-width: 900px;
-      max-height: 173px;
+      max-height: 300px;
       float: left;
       left: 0;
       column-count: 3;

diff --git a/footer.php b/footer.php
index 64f4ce7..d73bcae 100644 (file)
--- a/footer.php
+++ b/footer.php
@@ -4,11 +4,11 @@
                                 <?php dynamic_sidebar('sidebar-f');?>
                             <?php endif;?>
                             <div class="row">
-                                <div class="large-5 columns text-center">
+                                <div class="small-centered small-11 medium-uncentered medium-5 columns text-center">
                                     <a href="<?php bloginfo('url');?>"><img src="<?php bloginfo('template_url'); ?>/assets/kalamazoo-logo-footer.jpg"></a> 
                                 </div>
                                 <?php get_template_part('parts/client-info-footer');?>
-                                <div id="social_foot" class="large-2 columns">
+                                <div id="social_foot" class="medium-2 columns show-for-medium-up">
                                     <p>Be Social</p>
                                     <ul class="social">
                                         <li><a class="facebook"></a></li>
@@ -35,7 +35,7 @@
                         <span class="bullet"> &#8226; </span>
                         <span> Produced by <a target="_blank" href="http://www.gaslightmedia.com">Gaslight Media</a></span>
                     </div>
-                    <div class="small-12 medium-5 text-left columns">
+                    <div class="small-12 small-text-center medium-5 medium-text-left columns">
                         <ul>
                             <li><a>Site Map</a></li>
                             <li><a>Privacy Policy</a></li>

diff --git a/front-page.php b/front-page.php
index 59e38f9..a510997 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -7,23 +7,23 @@
         <div id="block-wrap">
             <div class="row">
                 <div class="blocks">
-                    <div id="block-1" class="large-6 columns blocks overlay" style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-large.jpg') no-repeat; background-size: 100% 100%;">
+                    <div id="block-1" class="small-12 medium-6 columns blocks overlay" style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-large.jpg') no-repeat; background-size: 100% 100%;">
                         <h3>Kalamazoo Beer Week 2016</h3>
                             <p>Kalamazoo Beer Week, known fondly as KBW, is all about a relationship with craft beer.</p>
                             <p>This weeklong series of events support the craft beer experience through special tastings, dinners, and interactive events. Patrons will meet brewers themselves, learn about what it takes to develop these kinds of intricate, highly desired products, and have a ton of fun along the way.</p>
                             <a href="#">more...</a>
                     </div>
-                    <div class="large-6 columns">
+                    <div class="small-12 medium-6 columns">
                         <div class="row">
-                            <div id="block-2" class="large-6 columns blocks overlay"  style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-small1.jpg') no-repeat; background-size: 100% 100%;">
+                            <div id="block-2" class="small-12 medium-6 columns blocks overlay"  style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-small1.jpg') no-repeat; background-size: 100% 100%;">
                                 
                             </div>
-                            <div id="block-3" class="large-6 columns blocks overlay" style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-small2.jpg') no-repeat; background-size: 100% 100%;">
+                            <div id="block-3" class="small-12 medium-6 columns blocks overlay" style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-small2.jpg') no-repeat; background-size: 100% 100%;">
                                 <a></a>
                             </div>
                         </div>
                         <div class="row">
-                            <div id="block-4" class="large-12 columns blocks overlay" style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-medium.jpg') no-repeat; background-size: 100% 100%;">
+                            <div id="block-4" class="small-12 columns blocks overlay" style="background: url('<?php echo bloginfo('template_url');?>/assets/block-image-medium.jpg') no-repeat; background-size: 100% 100%;">
                                 <a></a>
                             </div>
                         </div>
@@ -49,16 +49,16 @@
             </div>
         </div>
         <div class="row collapse">
-            <div class="large-4 columns action-item">
+            <div class="small-12 medium-4 columns action-item">
                 <a><img src="<?php bloginfo('template_url'); ?>/assets/request-guides.jpg"></a>
             </div>
-            <div class="large-4 columns action-item">
+            <div class="small-12 medium-4 columns action-item">
                 <a><img src="<?php bloginfo('template_url'); ?>/assets/269-cool-things.jpg"></a>
             </div>
-            <div class="large-4 columns action-item">
+            <div class="small-12 medium-4 columns action-item">
                 <a><img src="<?php bloginfo('template_url'); ?>/assets/email-signup.jpg"></a>
             </div>
-            <div class="large-12 columns small-center text-center">
+            <div class="small--12 columns small-center text-center">
                 <a id="big-lens"><h1>#DiscoverKZoo</h1></a>
             </div>
         </div>

diff --git a/header.php b/header.php
index 24a7cbf..d55f3ac 100644 (file)
--- a/header.php
+++ b/header.php
@@ -12,7 +12,7 @@
       <div class="off-canvas-wrap" data-offcanvas>
         <div class="inner-wrap">
             <div id="page-wrapper">
-                <header id="high-nav">
+                <header id="high-nav" class="show-for-large-up">
                     <div class="row collapse">
                         <div class="large-2 columns">
                             <a id="small-lens" href="#" target="_blank">#DiscoverKZoo</a>

diff --git a/index.php b/index.php
index c28d889..9e859eb 100644 (file)
--- a/index.php
+++ b/index.php
@@ -5,7 +5,7 @@
     </div>    
     <div id="content-wrapper">
         <div class="row collapse">
-            <div class="medium-8 columns right">
+            <div class="small-12 medium-8 columns right">
                 <div class="row collapse">
                     <?php
                     get_template_part('parts/bread-crumbs');
@@ -20,7 +20,7 @@
                 </div>
             </div>
             <?php get_sidebar(); ?>
-            <div class="large-12 columns small-center text-center">
+            <div class="small-12 columns small-center text-center">
                 <a id="big-lens"><h1>#DiscoverKZoo</h1></a>
             </div>
         </div>

diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 9ec783e..4c6211b 100644 (file)
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -119,8 +119,8 @@
                 width: 100%;
                 min-width: 900px;
                 max-width: 900px;
-                max-height: 173px ;
-//                height: 100%;
+                max-height: 300px ;
+//                height: 173px !important;
                 float: left;
                 left: 0;
                 column-count: 3;

diff --git a/sidebar.php b/sidebar.php
index 3983689..ce264da 100644 (file)
--- a/sidebar.php
+++ b/sidebar.php
@@ -1,4 +1,4 @@
-                        <div id="side-links" class="show-for-large-up left large-4 columns">
+                        <div id="side-links" class="show-for-medium-up left medium-4 columns">
                             <div id="menu-side" class="row collapse">
                                 <?php glm_side_menu(); ?>
                             </div>