Responsive booking form layout in Wix Studio

Ask the community
, ,
1

I’m having trouble with

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?

CEO, Cambridge Transfers

2

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.

If this helped, please mark it as Solved.