I’m having trouble getting a multi-field booking form to look clean across desktop, tablet, and mobile without manually adjusting every field at each breakpoint.
Working in
Wix Studio Editor
Site link
I’m working on a live service website, but the issue is mainly with the responsive layout in the editor.
What I’m trying to do
I’m building a booking form for an airport transfer service. It includes pickup location, destination, travel date, pickup time, passengers, and vehicle type.
On desktop, I’d like related fields to appear in two columns. On mobile, they should stack vertically with consistent spacing and full-width inputs.
What I’ve tried so far
I’ve experimented with responsive grid layouts and different sizing options. I’ve also tried setting some elements to stretch, but changes at one breakpoint sometimes affect the spacing or positioning at another.
Extra context
I’d prefer to keep the form structure simple rather than creating separate layouts for desktop and mobile.
Is there a recommended way in Wix Studio to build this type of responsive form so the fields naturally reflow between breakpoints while maintaining consistent spacing?
Hi, the cleanest fix here is to group related fields in Flex containers instead of positioning each field individually.
Put each pair you want side by side on desktop (pickup/destination, date/time, passengers/vehicle type) into its own Container Box set to Flex Row, with wrap enabled and a fixed gap. On desktop there’s room for both fields in the row. On mobile, because wrap is on and each field has a min-width close to the container’s own width, the second field drops to its own line automatically, no per-field breakpoint override needed.
That also fixes the cross-breakpoint issue you’re seeing: when each field has its own separate size setting at every breakpoint, adjusting one at one width shifts the others. Once the fields live inside a Flex container, you only need ONE responsive override, the container’s own width/padding at the mobile breakpoint, and the fields reflow on their own.
Hi @Cambridge_Transfers, adding to the Flex reply above with the exact steps. The trick is to build the layout once on desktop and let it cascade down, so you only touch mobile once.
Clear out the old per-breakpoint tweaks first. Right-click each field (or its container) on tablet and mobile and choose “Remove overrides”. Leftover overrides are usually why a change at one width shifts things at another.
Group the fields in pairs: pickup + destination, date + time, passengers + vehicle. Put each pair in its own stack or container set to a horizontal flex layout, with wrap on and a fixed gap (say 16px).
Size the fields inside each pair the same way: width 100% (or fill), with a minimum width of around 260px. On desktop both fit side by side. On a narrow phone they can’t, so the second one wraps under the first by itself.
Stack the three pairs (plus the submit button) inside one vertical stack with the same gap. Spacing then stays even at every size.
Do all of this on desktop. Changes on desktop flow down to tablet and mobile, but changes on mobile don’t flow back up. If you do need a mobile tweak, make it on the outer stack only (padding, gap), never on single fields.
Check it by dragging the canvas width handle slowly from desktop down to mobile, not just by clicking the three breakpoints. Anything that jumps or overlaps still has an override on it.
One catch: if these fields are inside a Wix Forms form rather than separate input elements, the form handles its own field layout, so set the columns in the form’s layout settings instead of wrapping fields in your own containers.