tweaked the site for basic mobile use

1 files changed, 18 insertions, 1 deletions

diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 5dc6545..74a5252 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -19,7 +19,7 @@ label {
   flex-direction: row;
   justify-content: space-between;
 
-  height: 50vh;
+  height: 85%;
 }
 
 .addNewItemForm .textInputs,
@@ -67,3 +67,20 @@ label {
   padding: 0.8rem 0;
   border-bottom: 1px dotted $labelUnderlineColor;
 }
+
+@media only screen and (max-device-width: 480px) {
+  .formContainer {
+    padding: 0.5rem;
+    height: auto;
+  }
+  .addNewItemForm {
+    flex-direction: column;
+  }
+  .addNewItemForm .textInputs,
+  .addNewItemForm .numericInputs,
+  .addNewItemForm .menuButtons {
+    width: 90%;
+    padding: 1rem;
+    margin: 1rem auto;
+  }
+}