Fixed responsiveness

angaaruriakhil · Aug 20, 2021 · 48fe799 · 48fe799
1 parent cd3ea33
commit 48fe799
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 11 deletions.
diff --git a/main.js b/main.js
@@ -3,6 +3,7 @@ let screenOutput = document.querySelector("#screen_output");
 
 
 // Special Button Functionality - Functions
+
 function calculate() {
   let calc_answer; 
   let regex_operators = /[+-/*]/;
@@ -19,8 +20,8 @@ function calculate() {
       calc_answer = floatArray[0] + floatArray[1];
       break; 
     case "-": 
-    calc_answer = floatArray[0] - floatArray[1];
-    break;
+      calc_answer = floatArray[0] - floatArray[1];
+      break;
     case "*": 
       calc_answer = floatArray[0] * floatArray[1];
       break;

diff --git a/styles.css b/styles.css
@@ -1,3 +1,9 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
   background: linear-gradient(#647AAF, #092659);
   width: 100vw;
@@ -39,7 +45,9 @@ body {
   padding: 10px;
   border: 5px solid black;
   border-radius: 15px;
-  box-shadow: 10px 5px 5px #344F83;
+  background: linear-gradient(#647AAF, #092659);
+  width: 30vw;
+  height: 70vh;
 }
 
 #buttons {
@@ -48,8 +56,8 @@ body {
   grid-template-rows: repeat(5, 1fr);
   column-gap: 2px;
   row-gap: 2px;
-  width: 30vw;
-  height: 60vh;
+  width: 100%;
+  height: 100%;
   font-family: "Courier New", Courier, monospace, sans-serif;
 }
 
@@ -120,4 +128,14 @@ body {
 
 .pressed {
   transform: matrix(0.95, 0, 0, 0.95, 0, 0);
+}
+
+@media screen and (max-width: 1200px) {
+  #calculator {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    width: 80vw;
+    height: 90vh;
+  }
 }
diff --git a/styles.scss b/styles.scss
@@ -1,3 +1,9 @@
+* {
+  box-sizing: border-box;
+  margin: 0; 
+  padding: 0;  
+}
+
 body {
   background: linear-gradient(#647AAF, #092659);
   width: 100vw;
@@ -6,7 +12,7 @@ body {
   background-size: cover;
   display: flex; 
   justify-content: center; 
-  align-items: center; 
+  align-items: center;  
 }
 #screen-container { 
   height: 150px;
@@ -36,7 +42,10 @@ body {
   padding: 10px; 
   border: 5px solid black;
   border-radius: 15px;
-  box-shadow: 10px 5px 5px #344F83;   
+  // box-shadow: 10px 5px 5px #344F83; 
+  background: linear-gradient(#647AAF, #092659);
+  width: 30vw; 
+  height: 70vh; 
 }
 
 #buttons {
@@ -45,8 +54,8 @@ body {
   grid-template-rows: repeat(5, 1fr); 
   column-gap: 2px; 
   row-gap: 2px; 
-  width: 30vw; 
-  height: 60vh;
+  width: 100%; 
+  height: 100%;
   font-family: 'Courier New', Courier, monospace, sans-serif;     
 }
 
@@ -115,8 +124,19 @@ body {
   grid-column-start: 2;
   grid-row-start:5; 
 }
-// for use with button 
+// For use with button as part of pressing down animation.  
 
 .pressed {
   transform: matrix(0.95, 0, 0, 0.95, 0, 0);
-}
+}
+  // Media Query for responsiveness
+
+  @media screen and (max-width: 1200px) {
+    #calculator {
+      display: flex; 
+      flex-direction: column;
+      padding: 10px; 
+      width: 80vw; 
+      height: 90vh; 
+    }
+  }