2 files changed, 15 insertions, 12 deletions

@@ -3,11 +3,13 @@ body
     background-color: rgb(102,102,102)
 
 #wrap
-    width: 80%
-    margin: 1em auto
     background-color: white
     border: 1px solid black
 
+    @media only screen and (min-width: 768px)
+        width: 80%
+        margin: 1em auto
+
 #banner
     background-color: rgb(153,0,0)
     font-size: 1.25em
@@ -91,7 +93,6 @@ body
             margin: 0.5em 0.75em
             padding: 0
             position: static
-            width: 100%
             .quote-speaker
                 font-weight: bold
                 color: green
@@ -135,15 +136,16 @@ body
         margin: 0.5em
     textarea
         width: 100%
-    #about-left
-        float: left
-        width: 48%
-        margin-right: 1em
-    #about-right
-        float: right
-        width: 48%
-        margin-left: 1em
-        margin-bottom: 1em
+    @media only screen and (min-width: 768px)
+        #about-left
+            float: left
+            width: 48%
+            margin-right: 1em
+        #about-right
+            float: right
+            width: 48%
+            margin-left: 1em
+            margin-bottom: 1em
 
 #error-messages
     margin: .5em
@@ -9,6 +9,7 @@
     = auto_discovery_link_tag :atom, latest_quotes_url(:atom)
     = display_meta_tags og: { site_name: "Four Island" }
     %link{rel: "alternate", type: "application/atom+xml", href: latest_quotes_url(:atom)}
+    %meta{name: "viewport", content: "width=device-width, initial-scale=1.0"}
   %body
     #wrap
       %header#banner