first steps in responsive layout

diff --git a/footer.php b/footer.php
index ce8f2a4..7262f43 100644 (file)
--- a/footer.php
+++ b/footer.php
@@ -4,22 +4,22 @@
                                 <?php dynamic_sidebar('sidebar-f');?>
                             <?php endif;?>
                             <div id="res" class="row">
-                                <div id="lantern">
+                                <div id="lantern" class="show-for-large-up">
                                     <img src="<?php bloginfo('template_url');?>/assets/lantern.png">
                                 </div>
-                                <div id="res-content" class="large-offset-1 large-7 columns">
+                                <div id="res-content" class="small-12 small-offset-1 large-offset-1 large-7 columns">
                                     <h1>Request A Reservation</h1>
                                     <p>Dolenis sinis nihic teturitat id que prorro in <br>cturem dem volorit atiume ped.</p>
                                     <a id="request-but" href="#"></a>
                                 </div>
-                                <div id="camp">
+                                <div id="camp" class="show-for-large-up">
                                     <img src="<?php bloginfo('template_url');?>/assets/camping-icon.png">
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="large-12 small-centered columns">
+                                <div class="small-12 small-centered columns">
                                     <div class="row">
-                                        <div class="large-3 columns text-center">
+                                        <div class="small-12 medium-3 columns text-center">
                                             <a href="<?php bloginfo('url');?>"><img src="<?php bloginfo('template_url');?>/assets/camp-petosega-footer-logo.png"></a>
                                         </div>
                                         <?php get_template_part('parts/client-info-footer');?>

diff --git a/header.php b/header.php
index c7e540b..f129163 100644 (file)
--- a/header.php
+++ b/header.php
@@ -15,27 +15,27 @@
             <div id="page-wrapper">
                     <header class="main">
                         <div class="row">
-                            <div class="large-6 columns">
+                            <div class="small-12 medium-6 columns">
                                 <a id="big-logo" href="<?php bloginfo('url')?>"><img src="<?php bloginfo('template_url');?>/assets/camp-petosega-logo.png"></a>
                             </div>
-                            <div class="large-6 columns">
+                            <div class="medium-6 columns show-for-medium-up">
                                 <div class="row">
-                                    <div class="large-12 columns text-right">
+                                    <div class="medium-12 columns text-right">
                                         <div class="row collapse">
-                                            <div class="large-8 columns">
+                                            <div class="medium-8 columns">
                                                 <a id="contact"  href="#">Contact</a>
                                             </div>
-                                            <div class="large-4 columns search-top show-for-large-up">
+                                            <div class="medium-4 columns search-top show-for-large-up">
                                                 <?php get_template_part('parts/search');?>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div id="under" class="row collapse">
-                                    <div class="large-9 columns text-right">
+                                    <div class="medium-9 columns text-right">
                                         <span id="phone">231-347-6536</span>
                                     </div>
-                                    <div class="large-3 columns social">
+                                    <div class="medium-3 columns social">
                                         <a href="#"><img src="<?php bloginfo('template_url');?>/assets/facebook-icon.png"></a>
                                         <a href="#"><img src="<?php bloginfo('template_url');?>/assets/youtube-icon.png"></a>
                                     </div>

diff --git a/parts/client-info-footer.php b/parts/client-info-footer.php
index 4948bcb..2b48e94 100644 (file)
--- a/parts/client-info-footer.php
+++ b/parts/client-info-footer.php
@@ -1,10 +1,10 @@
 <div id="footer_address" class="small-centered small-11 medium-uncentered medium-4 columns">
     <?php if (function_exists('glm_get_clientinfo_option')) :?>
     <div class="row collapse">
-        <div class="medium-3 columns">
+        <div class="medium-3 columns show-for-medium-up">
             <img id="map" src="<?php bloginfo('template_url');?>/assets/map-icon.png">
         </div>
-        <div class="medium-9 columns address">
+        <div class="small-12 medium-9 columns address">
             <?php if (glm_get_clientinfo_option('address')):?>
                 <span><?php echo glm_get_clientinfo_option('address');?></span><br>
                 <span><?php echo glm_get_clientinfo_option('city');?>, <?php echo glm_get_clientinfo_option('state');?>
@@ -22,10 +22,10 @@
     <?php endif;?>
 <div class="small-centered small-11 medium-uncentered medium-5 columns">
     <div class="row collapse">
-        <div class="medium-2 columns">
+        <div class="medium-2 columns show-for-medium-up">
             <img id="compass" src="<?php bloginfo('template_url');?>/assets/compass-icon.png">
         </div>
-        <div class="medium-10 columns dir-contact">
+        <div class="small-12 medium-10 columns dir-contact">
             <?php if (glm_get_clientinfo_option('phone')) :?>
                 <span><?php echo glm_get_clientinfo_option('phone');?></span>
             <?php endif;?>