Wee bit o' responsive design

dce · Mar 29, 2012 · 399ce2e · 399ce2e
1 parent f634d54
commit 399ce2e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/css/style.css b/css/style.css
@@ -37,7 +37,7 @@ a:hover {
 }
 
 #container {
-  width: 760px;
+  max-width: 760px;
   padding: 0 20px;
   margin: 0 auto;
 }
@@ -56,10 +56,6 @@ header div.title {
   float: left;
 }
 
-header div.current-time {
-  float: right;
-}
-
 div#primary {
   text-align: center;
   margin-bottom: 40px;
@@ -92,10 +88,31 @@ div#secondary {
   padding: 40px 0 20px;
 }
 
-div#hours {
-  width: 360px;
-  margin-right: 20px;
-  float: left;
+@media screen and (max-width: 760px) {
+  header div.current-time {
+    display: none;
+  }
+
+  div#hours, div#map {
+    width: 360px;
+    margin: 0 auto 20px;
+  }
+}
+
+@media screen and (min-width: 760px) {
+  header div.current-time {
+    float: right;
+  }
+
+  div#hours {
+    width: 360px;
+    margin-right: 20px;
+    float: left;
+  }
+
+  div#map {
+    margin-left: 400px;
+  }
 }
 
 div#hours h4 {
@@ -146,7 +163,6 @@ div#hours p {
 }
 
 div#map {
-  margin-left: 400px;
   line-height: 1.6em;
 }
 

diff --git a/index.php b/index.php
@@ -84,6 +84,7 @@ function hours_to_string($hours) {
   <meta charset="utf-8">
   <title>Francesca's Dessert Cafe (Durham, NC) Hours of Operation</title>
   <meta class="description" content="Hours for Francesca's Dessert Caffe in Durham, NC. <?= hours_to_string($hours) ?>." />
+  <meta name="viewport" content="width=400, initial-scale=0.7, minimum-scale=0.45" />
   <link rel="stylesheet" href="css/style.css">
 
   <script type="text/javascript">