Better phone support for layout

[garden.git] / templates / style / screen.css

diff --git a/templates/style/screen.css b/templates/style/screen.css
index 11e561161649aa519711ef87b65d5e475a1dd1d9..7fbf9d3bc32e7ec4d8dec4e56628ea7407261a00 100644 (file)
--- a/templates/style/screen.css
+++ b/templates/style/screen.css
@@ -1,6 +1,6 @@
 html {
        line-height: 1.3;
-       -webkit-text-size-adjust:100%
+       -webkit-text-size-adjust: 100%
 }
 
 body {
@@ -19,7 +19,7 @@ body {
        margin: 0 auto;
        min-height: 100vh;
        padding: 0;
-       width: 60em;
+       max-width: 60em;
 }
 
 header {
@@ -57,6 +57,20 @@ footer {
        text-align: right;
 }
 
+@media (max-width: 800px) {
+       .container {
+               grid-template:
+                       "head" 7em
+                       "main" auto
+                       "nav" auto
+                       "foot" 2em / 1fr;
+       }
+
+       header {
+               padding: 1em;
+       }
+}
+
 img {
        max-width: 100%;
        margin: 0 auto;