decreased font size and padding for elements when in mobile view

imywong · May 31, 2023 · 825e38e · 825e38e
1 parent baede50
commit 825e38e
Showing 1 changed file with 34 additions and 33 deletions.
diff --git a/styles.css b/styles.css
@@ -39,38 +39,6 @@ input[name="answer"] {
     width: 100%;
 }
 
-@media (max-width: 700px) {
-    section{
-        width: 100%;
-      }
-      #rightCol {
-        float: none;
-        padding-top: 50px;
-        height:70%;
-      }
-      #leftCol {
-        float: none;
-
-        height:30%;
-      }
-      #questionTxt,#answerTxt{
-        font-size: 2rem;
-    }
-
-    input[name="answer"] {
-        font-size: 2rem; 
-        width: 5rem; 
-        height: 2rem; 
-      }
-
-    button {
-        font-size: 1rem;
-        padding: 2px 2px;
-        margin: 0 2px;
-        cursor: pointer;
-        }
-    }
-
 /* button{
 border: 0.5px solid black;
 padding:0.5rem 1rem;
@@ -112,4 +80,37 @@ button {
 
     i {
         padding-right: 0.5rem;
-      }
+      }
+
+      @media (max-width: 700px) {
+        section{
+            width: 100%;
+          }
+          #rightCol {
+            float: none;
+            padding-top: 50px;
+            height:70%;
+          }
+          #leftCol {
+            float: none;
+
+            height:30%;
+          }
+          #questionTxt,#answerTxt{
+            font-size: 2rem;
+        }
+
+        input[name="answer"] {
+            font-size: 2rem; 
+            width: 5rem; 
+            height: 2rem; 
+          }
+
+        button {
+            font-size: 1rem;
+            padding: 5px 10px;
+            margin: 0 1px;
+            border-radius: 10px;
+            cursor: pointer;
+            }
+        }