Form: Adds responsive mobile styling for grouped form elements fixes

11 years ago · 1d0d3983df
1 changed files with 16 additions and 0 deletions
--- a/src/collections/form.less
+++ b/src/collections/form.less
@ -507,6 +507,22 @@
  padding-right: 1%;
 }

+/* Swap to full width on mobile */
+@media only screen and (max-width : 767px) {
+  .ui.form .two.fields > .fields,
+  .ui.form .two.fields > .field,
+  .ui.form .three.fields > .fields,
+  .ui.form .three.fields > .field,
+  .ui.form .four.fields > .fields,
+  .ui.form .four.fields > .field,
+  .ui.form .five.fields > .fields,
+  .ui.form .five.fields > .field {
+    width: 100%;
+    padding-left: 0%;
+    padding-right: 0%;
+  }
+}
+
 .ui.form .fields .field:first-child {
  padding-left: 0%;
 }