Make calculator more responsive

2023-12-29 11:35:58 -07:00 · 2023-12-29 11:35:58 -07:00 · 97b2734e9e
commit 97b2734e9e
parent 87a27395d5
1 changed files with 23 additions and 0 deletions
--- a/style.css
+++ b/style.css
@ -183,3 +183,26 @@ footer a:hover, footer a:focus {
    text-decoration: none;
    margin: 0;
 }
+
+@media only screen and (max-width: 600px) {
+    
+    .calculator {
+        width: 90vw;
+        height: 70%;
+    }
+
+    .main-screen {
+        font-size: 45px;
+        word-wrap: break-word;
+    }
+
+    button {
+        font-size: 40px;
+        height: 100%;
+        width: 100%;
+    }
+
+    .equal {
+        width: 100%;
+    }
+}