Add media queries to fix responsive issues

This mofo is now mobile-friendly...sort of. Technically, it's fine, but it does my head in having to scroll up and down to see the computer's choice and win/lose/draw comments, etc. Design could be improved on this front.
StevieBrooks · Jan 13, 2023 · b033039 · b033039
1 parent dd5bd1c
commit b033039
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/style.css b/style.css
@@ -193,6 +193,7 @@
         @media (max-width: 860px) {
             .score-box {
                 font-size: 1.8rem;
+                text-align: center;
             }
             .player-boxes {
                 flex-direction: column-reverse;
@@ -210,6 +211,11 @@
                 margin: .4rem;
             }
         }
+        @media (max-width: 585px) {
+            .score-box {
+                font-size: 1.5rem;
+            }
+        }
 
         @media (max-width: 420px) {
             .user-box, .comp-box {
@@ -223,3 +229,15 @@
             }
         }
 
+        @media (max-width: 350px) {
+            .user-choice, .comp-choice {
+                width: 95%;
+            }
+            .user-choices {
+                width: 100%;
+            }
+            .choice {
+                width: 45px;
+                margin: .3rem;
+            }
+        }