fix mobile ratio & enlarge for desktop

magenta · Feb 28, 2021 · 45a0b37 · 45a0b37
1 parent bd4496f
commit 45a0b37
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 />
     <meta property="og:title" content="Lo-Fi Player" />
     <meta property="og:description" content="Interactive lofi beat player." />
     <meta

diff --git a/style.css b/style.css
@@ -620,7 +620,7 @@ footer {
   }
 }
 
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 830px) {
   :root {
     --input-thumb-size: 8px;
     --border-width: 5px;
@@ -668,7 +668,7 @@ footer {
     font-size: 0.3rem;
   }
   #board-input {
-    font-size: 0.25rem;
+    font-size: 0.3rem;
   }
 
   #warning-overlay {
@@ -828,3 +828,25 @@ footer {
     padding: 0.2rem;
   }
 }
+
+@media screen and (min-width: 1000px) {
+  #container {
+    width: 85%;
+    max-width: 1500px;
+  }
+}
+
+@media screen and (orientation:landscape) and (max-width: 830px) {
+
+  #container {
+    width: 75%;
+  }
+
+  #clock-text {
+    top: 15%;
+  }
+
+  #board-input {
+    font-size: 0.4rem;
+  }
+}