Adapt grid layout for mobile users

themes/red/assets/css/site.css

@@ -1,12 +1,29 @@
+/* desktop devices */
+@media (min-width: 768px) {
     body {
-    background-color: #eebebe;
-
-    display: grid;
         grid-template:
         "head head"
         "nav  main"
         "nav  foot";
     }
+}
+
+/* mobile devices */
+@media (max-width: 768px) {
+    body {
+        grid-template:
+        "head"
+        "nav"
+        "main"
+        "foot";
+    }
+}
+
+body {
+    background-color: #eebebe;
+
+    display: grid;
+}
 
 header {
     grid-area: head;