fix: responsive form

14nrv · Nov 10, 2018 · d283c66 · d283c66
1 parent c67331e
commit d283c66
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
@@ -159,7 +159,7 @@ export default {
 <style lang="stylus">
   $defaultMargin = .75rem
   $formWidth = 28rem
-  $tablet_bp = 769px
+  $bp_mobile = 496px
 
   form
     max-width $formWidth
@@ -169,9 +169,17 @@ export default {
     margin-bottom $defaultMargin
 
   .field-body
+    display block
+
+    @media (min-width: $bp_mobile)
+      display flex
+      justify-content space-between
+
     .field
-      @media (min-width: $tablet_bp)
-        width ($formWidth / 2 - $defaultMargin)
+      width 100%
+
+      @media (min-width: $bp_mobile)
+        width ($formWidth / 2 - $defaultMargin / 2)
 
   .form-footer
     .button:not(:last-child)