From 5e302dbcda898ef802f014b06cf15f6722a7e9d3 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Mon, 18 Jul 2022 02:31:30 +0400
Subject: [PATCH] Fix using 1 column layout on small screens

---
 src/interface/web/index.html | 45 ++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/interface/web/index.html b/src/interface/web/index.html
index 8a1574b3..c14c7ca2 100644
--- a/src/interface/web/index.html
+++ b/src/interface/web/index.html
@@ -77,26 +77,6 @@
     </body>
 
     <style>
-        body {
-            display: grid;
-            grid-template-columns: 1fr min(70vw, 100%) 1fr;
-            margin: 0px;
-            padding: 0px;
-            background: #eee;
-            color: #888;
-            text-align: center;
-            font-family: roboto, karma, segoe ui, sans-serif;
-            font-size: 20px;
-            font-weight: 300;
-            line-height: 1.5em;
-        }
-        body > * {
-            grid-column: 2;
-            padding: 10px;
-            margin: 10px;
-        }
-
-        /* Switch to 1 Column for Mobile Displays */
         @media only screen and (max-width: 600px) {
             body {
                 display: grid;
@@ -106,7 +86,32 @@
                 grid-column: 1;
             }
         }
+        @media only screen and (min-width: 600px) {
+            body {
+                display: grid;
+                grid-template-columns: 1fr min(70vw, 100%) 1fr;
+                padding-top: 60vw;
+            }
+            body > * {
+                grid-column: 2;
+            }
+        }
 
+        body {
+            padding: 0px;
+            margin: 0px;
+            background: #eee;
+            color: #888;
+            text-align: center;
+            font-family: roboto, karma, segoe ui, sans-serif;
+            font-size: 20px;
+            font-weight: 300;
+            line-height: 1.5em;
+        }
+        body > * {
+            padding: 10px;
+            margin: 10px;
+        }
         h1 {
             font-weight: 200;
             color: #888;