diff options
-rw-r--r-- | src/components/Form/Form.css | 15 | ||||
-rw-r--r-- | src/components/Form/Form.scss | 19 | ||||
-rw-r--r-- | src/styles/global.css | 4 | ||||
-rw-r--r-- | src/styles/global.scss | 6 |
4 files changed, 42 insertions, 2 deletions
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%; + } +} |