From 17c22b6078057ff70ad80e4315a8d7758a0605e4 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Thu, 15 Apr 2021 23:34:41 +0530
Subject: tweaked the site for basic mobile use

---
 src/components/Form/Form.css  | 15 ++++++++++++++-
 src/components/Form/Form.scss | 19 ++++++++++++++++++-
 src/styles/global.css         |  4 ++++
 src/styles/global.scss        |  6 ++++++
 4 files changed, 42 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index 9dbfd6f..9d46f62 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -27,7 +27,7 @@ label {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 50vh; }
+  height: 85%; }
 
 .addNewItemForm .textInputs,
 .addNewItemForm .numericInputs {
@@ -69,3 +69,16 @@ label {
   justify-content: space-between;
   padding: 0.8rem 0;
   border-bottom: 1px dotted lightblue; }
+
+@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; } }
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;
+  }
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 4950d01..e5147f8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -23,3 +23,7 @@ body {
 .root-content {
   width: 95%;
   margin: auto; }
+
+@media only screen and (max-device-width: 480px) {
+  .root-content {
+    width: 95%; } }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 282c790..a3727ec 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -14,3 +14,9 @@ body {
   width: 95%;
   margin: auto;
 }
+
+@media only screen and (max-device-width: 480px) {
+  .root-content {
+    width: 95%;
+  }
+}
-- 
cgit v1.2.3