Added landscape orientation to media queries.

7131 · Jul 19, 2023 · 7230750 · 7230750
1 parent 0df3907
commit 7230750
Showing 1 changed file with 38 additions and 21 deletions.
diff --git a/default.css b/default.css
@@ -6,18 +6,18 @@ article {
 }
 
 input {
-    width: 90%;
+    width: 90vw;
 }
 
 button {
     margin-top: 2ex;
-    width: 90%;
+    width: 90vw;
 }
 
 svg {
     border: 1px solid gray;
-    width: 90%;
-    height: 90%;
+    width: 90vw;
+    height: 90vw;
 }
 
 .table .row {
@@ -28,38 +28,55 @@ svg {
     color: red;
 }
 
-@media (min-width: 768px) {
+@media (orientation: landscape) {
 
     article {
         line-height: 1.5;
     }
 
-    #pattern {
-        width: 300px;
+    input {
+        width: 90vh;
     }
 
     button {
-        margin-top: 0ex;
-        width: auto;
+        width: 90vh;
     }
 
     svg {
-        width: 300px;
-        height: 300px;
+        width: 90vh;
+        height: 90vh;
     }
 
-    .table {
-        display: table;
-    }
+    @media (min-width: 768px) {
 
-    .table .row {
-        display: table-row;
-    }
+        #pattern {
+            width: 300px;
+        }
+
+        button {
+            margin-top: 0ex;
+            width: auto;
+        }
+
+        svg {
+            width: 300px;
+            height: 300px;
+        }
+
+        .table {
+            display: table;
+        }
+
+        .table .row {
+            display: table-row;
+        }
+
+        .table .row .cell {
+            display: table-cell;
+            padding: 0.5ex 2ex 0.5ex 0ex;
+            vertical-align: middle;
+        }
 
-    .table .row .cell {
-        display: table-cell;
-        padding: 0.5ex 2ex 0.5ex 0ex;
-        vertical-align: middle;
     }
 
 }