Form with left / right columns flowing as one column in mobile

Wappler General How To
#1

Hello everyone,
Currently, this is what I have on my form:

form id=“form1”
div class=“form-row”
div class=“col” (column left)
form input fields
div class=“col” (column right)
form input fields

Which displays the following results on any type of device, desktop, mobile, etc:
Col-left form input fields | Col-right form input fields

QUESTION
When using a mobile device, how can I make the form input fields on the Col-right move below the Col-left form input fields? Like this:
Col-left form input fields
Col-right form input fields

Thanks for the feedback.

#2

All you need to do is - in design mode switch to mobile portrait view, select your left col in the “App Structure” panel, look in the column properties panel below “App Structure”, and set the LAYOUT > Size to 12.
Repeat the process for the right hand column.

When you are done with layout adjustments on the Mobile Portrait design view, switch over to tablet, and do the same thing you did above but this time set the left col size to only 6, and the same with the right col.

Now on mobile portrait and landscape it will take the full width, and on Tablet and above it will only take half the width.

1 Like
#3

Thank you!