Improve layout on small screens.

1 files changed, 7 insertions, 2 deletions

diff --git a/uploader/static/css/layout-small.css b/uploader/static/css/layout-small.css
index 80a3759..2e47217 100644
--- a/uploader/static/css/layout-small.css
+++ b/uploader/static/css/layout-small.css
@@ -2,7 +2,7 @@
     body {
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: 1fr 2fr 7fr;
+        grid-template-rows: 1fr 90fr;
         grid-gap: 1em;
     }
 
@@ -31,6 +31,11 @@
         grid-column-end: 2;
     }
 
+    #header #header-nav ul {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
+
     #main {
         /* Place it in the parent element */
         grid-column-start: 1;
@@ -38,7 +43,7 @@
         display: grid;
 
         /* Define layout for the children elements */
-        grid-template-rows: 1.5em 80% 20%;
+        grid-template-rows: 1fr 80fr 20fr;
         grid-template-columns: 1fr;
     }