padding for content on Small. center Small top phone. Side nav smaller on Medium...

diff --git a/css/foundation.css b/css/foundation.css
index cd8ce8f..452db98 100644 (file)
--- a/css/foundation.css
+++ b/css/foundation.css
@@ -26,8 +26,7 @@ meta.foundation-data-attribute-namespace {
 
 html, body {
   height: 100%; }
-
-*,
+ *,
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
@@ -59,7 +58,6 @@ img {
 
 img {
   -ms-interpolation-mode: bicubic; }
-
 #map_canvas img,
 #map_canvas embed,
 #map_canvas object,
@@ -3453,7 +3451,8 @@ dialog[open] {
     margin-top: -0.5rem;
     left: 0.90625rem;
     box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
-    width: 1rem; 
+    width: 1rem;
+      line-height: 1.2rem;
   
   color: black;
   }
@@ -4146,7 +4145,7 @@ input[type="file"],
 input[type="checkbox"],
 input[type="radio"],
 select {
-  margin: 0 0 1rem 0; }
+  margin: 0 0 1rem 0 !important; }
 
 input[type="checkbox"] + label,
 input[type="radio"] + label {

diff --git a/styles.css b/styles.css
index 5b58f2f..64f661b 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -12,6 +12,11 @@ body {
     padding: 0;
     display: block;
     }
+
+@media only screen and (max-width: 40.063em) {
+    .main-section{ padding-top: 47px;
+    }
+}
 /* Header */
 #logo {
     width: 347px;
@@ -53,7 +58,8 @@ body {
     color: #b5383e;
     border: 1px solid black;
     text-transform: uppercase;
-    text-align: center;
+    text-align: right;
+    padding-right: 10px;
     }
 /* nav */
 .top-bar {
@@ -204,6 +210,18 @@ body {
 #sidenav {
     padding: 15px 20px;
     }
+@media only screen and (max-width: 58.063em) {
+    #sidenav {
+        padding: 10px 5px;
+        }
+    #sidenav a {
+        font-size: .9rem;
+        padding: 5px 5px;
+        }
+    #sidenav h2 {
+        padding: 10px;
+        }
+    }
 #sidenav h2 {
     color: #fffb02;
     font-size: 18px;

diff --git a/templates/template.html b/templates/template.html
index c17bef6..899fb5b 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -52,15 +52,19 @@ $(function() {
         </aside>
         <section class="main-section">
             <div class="row">
-                <div class="medium-8 columns">
+                <div class="small-1 medium-7 columns">
                     <h1 id="logo"><a href="{homePageUrl:h}"><img src="{mediaBaseURL:h}assets/logo.png" alt=""></a></h1>
                     <h2 id="saultstemarie" class="hide-text">Sault Ste. Marie, Michigan</h2>
                 </div>
-                <div class="medium-4 columns">
-                    <div class="vcard">
-                        <span class="tel">(800) 432-6301</span>
-                        <a href="{baseURLDefined:h}contact-us-10/">Contact</a>
-                        <input type="text" placeholder="Search" />
+                <div class="small-11 medium-5 columns">
+                    <div class="vcard row">
+                        <div class="small-7 medium-12 columns">
+                            <span class="tel">(800) 432-6301</span>
+                            <a href="{baseURLDefined:h}contact-us-10/">Contact</a>
+                        </div>
+                        <div class="small-5 medium-12 columns">
+                            <input type="text" placeholder="Search" />
+                        </div>
                     </div>
                 </div>
             </div>