-
iconadminAsked on January 9, 2017 at 1:28 PM
Hello there,
How do I get this form to form three columns?
it looks okay when im working on it but when I view it the boxes aren't all lined up.
I would like guest name, phone number and email all on one line. I guess there is some sort of code to arrange columns but I don't know it.
Best,
Jennifer
-
BJoannaReplied on January 9, 2017 at 4:13 PM
I have cloned your form and I noticed that mentioned fields are shown in same line inside of Form Builder, but that on live form additional filed are also placed in same line.
Easiest way to resolve this issue is to reduce width of your form. Currently width is set to 750px. If you reduce the width of the form to 700px your issue should be resolved. You can change the width of the form inside of Form Designer.
Here is my demo form: https://form.jotform.com/70086434868970
Feel free to clone it.
Hope this will help. Let us know if you need further assistance.
-
iconadminReplied on January 11, 2017 at 5:04 PM
Hello.
this form is looking pretty good now, but there is one view where it is pretty awful:
https://www.jotform.com/?formID=70084440579257#design
Is there any way to lock it so it shrinks according to the device? I would like it to always have all three (guest name/phone/email address) in one row.
Best,
Jennifer
-
Elton Support Team LeadReplied on January 11, 2017 at 10:23 PM
That's possible. If you want the 3 columns to retain on mobile view, inject this CSS codes to your form.
@media screen and (max-width:480px){
.form-col-1,
.form-col-2,
.form-col-3 {
width: 33.3% !important;
padding:10px 4px;
}
.form-label{font-weight:normal;}
[data-type='control_dropdown'] .form-input-wide {width: 100%;}
li#id_67 {width: 100% !important;}
li#id_20, li#id_21 {width: 50% !important;}
}
Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
This is how your form would look like on mobile afterwards:
Hope this helps!