Adapted the UI for mobile (table incomplete)

1 files changed, 42 insertions, 7 deletions

diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 1ba5b85..393a2d3 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -103,10 +103,6 @@ input {
   width: 27rem;
 }
 
-.threePaneForm .smallPane {
-  width: 15rem;
-}
-
 .twoPaneForm label {
   @include formWideLabel();
 }
@@ -135,10 +131,49 @@ input {
   font-size: $fontSize2;
 }
 
-
-/* */
 .MetaInfoForm {
   width: 60%;
 }
 
-
+@media only screen and (max-device-width: 480px) {
+  .threePaneForm {
+    flex-direction: column;
+    height: 45rem;
+    margin: 3rem auto;
+  }
+
+  .threePaneForm .widePane,
+  .threePaneForm .smallPane {
+    width: 100%;
+  }
+
+  .threePaneForm label {
+    flex-wrap: wrap;
+  }
+
+  .twoPaneForm {
+    flex-direction: column;
+    height: 28rem;
+  }
+  
+  .twoPaneForm .widePane {
+    width: 100%;
+  }
+
+  .twoPaneForm label {
+    flex-wrap: wrap;
+  }
+
+  .wideInputBox, .selectInputBox {
+    width: 100%;
+  }
+  
+  .smallInputBox {
+    width: 5.5rem;
+  }
+
+  .MetaInfoForm {
+    width: 100%;
+    height: 15rem;
+  }
+}