I’m working with some rather long forms and have styled them in a way to make them look a bit better, i.e. I have used the field’s “Width %” option and put my fields to widths of 30% and 70% respectively to have them displayed next to each other in one row.
This works well and displays them nicely as intended, but it gets too small on mobile.
My first impulse was to use my theme’s Bootstrap classes and instead of using the “Width %” option I gave my fields the classes “col-sm-4 col-xs-12” and “col-sm-8 col-xs-12” respectively.
This too works well and almost gives me the desired result. My fields show correctly on mobile, but even though they have the right dimensions on desktop (width-wise) they are still stacked on top of each other.
Is there a preferred method of getting them to flow correctly?
Hi @dtx211
If you use custom classes, then you need to float the fields to the left and set the clear to “none”. So, your CSS code should be something like this:
float: left;
clear: none;
I hope this helps 🙂
