add @query for mobile top marginand display 2em

FitzBrendan · Jul 19, 2023 · 006c893 · 006c893
1 parent a5b669e
commit 006c893
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,6 @@ Digital Calculator
 
 Completed layout and styles for calculator.
 
-Complete calc functions are defined
+Complete calc functions are defined
+
+Responsive @query 2em top margin and displays min height 
diff --git a/style.css b/style.css
@@ -27,6 +27,16 @@ html {
   --green__border--inset: 4px inset #8ee18eb3;
 }
 
+@media (max-width: 480px) {
+  #calc__grid--container {
+    margin-top: 2em;
+  }
+  #pad,
+  #result {
+    min-height: 2em;
+  }
+}
+
 #calc__grid--container {
   margin: auto;
   margin-top: 4em;
@@ -71,7 +81,6 @@ html {
   border: 4px inset #fafafa66;
 }
 
-
 /* ==== Styles for Hover over Input Grid Items */
 
 .erase:hover,
@@ -143,7 +152,6 @@ html {
   grid-row: 1;
 }
 #pad {
-  /* grid-column: 2 / -1; */
   grid-column: 2 / span 3;
   grid-row: 1 / span 1;
 }
@@ -157,13 +165,8 @@ html {
   grid-row: 2 / span 1;
 }
 
-
 /* ==== Calculator Inputs Grid Line Positioning */
 
-/* #pos_neg {
-  grid-column: 1;
-  grid-row: 3;
-} */
 #percentage {
   grid-column: 2;
   grid-row: 3;