From 006c893949c6f8326c89f73e3611ff43d6b964bf Mon Sep 17 00:00:00 2001
From: Fitz <108022185+FitzBrendan@users.noreply.github.com>
Date: Wed, 19 Jul 2023 14:04:31 -0400
Subject: [PATCH] add @query for mobile top marginand display 2em

---
 README.md |  4 +++-
 style.css | 17 ++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index c980b66..c723c01 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,6 @@ Digital Calculator
 
 Completed layout and styles for calculator.
 
-Complete calc functions are defined
\ No newline at end of file
+Complete calc functions are defined
+
+Responsive @query 2em top margin and displays min height 
\ No newline at end of file
diff --git a/style.css b/style.css
index 3ac44d0..73056cb 100644
--- 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;