Responsive design in Wix Studio Two: breakpoints, Auto Mobile and max width

Responsive design in Wix Studio Two starts with two breakpoints, desktop and mobile, and a setting called Auto Mobile that builds the mobile layout from your desktop changes. Breakpoints apply to the whole site, changes flow down from larger screens to smaller ones, and a 1920px max width stops layouts stretching on very wide screens. Get those ideas straight and most layout headaches go away.

What breakpoints does Studio Two use?

A new Studio Two site has two: desktop at 1024px and up, and mobile from 320 to 1023px. You can add three more types from Customize Breakpoints in the top bar: Wide screen (1920px and up), Tablet (701 to 1023px), or Custom, where you set the maximum width yourself.

The big change from the Studio Editor is scope. There, you set breakpoints page by page. In Studio Two they're site-wide. Add, edit or delete one and it changes every page. Deleting a breakpoint also deletes every customisation you made on it, and the breakpoint below takes over its range.

Custom breakpoints slot in around the others. Set a custom maximum of 500px, for example, and that becomes your mobile breakpoint (320 to 500px). Wix turns the rest of the old mobile range into a tablet breakpoint automatically. 320px is always the minimum.

To check a width inside a breakpoint, type it into the canvas width field at the top right. Zooming, from 10% to 600%, never changes the breakpoint.

How do changes flow between breakpoints?

Downwards. A change on desktop carries to the smaller breakpoints. A change on mobile stays on mobile and never flows back up to desktop.

There's one exception worth knowing. Changing an element's responsive behaviour on desktop or tablet isn't carried down to mobile.

What does Auto Mobile do?

Auto Mobile rearranges your mobile layout when you make structural changes on desktop, such as adding or moving elements. It's on by default for new sites.

It switches itself off for a section once you take that section over on mobile. Three things do that:

• Adjusting the section's layout on the mobile breakpoint.
• Changing an element's responsive behaviour on mobile.
• Hiding an element on mobile only.

To turn it back on for a section, open the mobile breakpoint, select the section, hover over the Auto Mobile icon next to it and choose Turn On for this Section. That only works while Auto Mobile is on for the whole site. If you switch it off site-wide, the adjustments it already made stay, but new desktop changes won't be adapted for mobile.

Our rule of thumb: leave it on and design desktop with mobile in mind. Take a section over by hand only when Auto Mobile can't give you the result you need. Wix also says Aria designs the desktop breakpoint only, so on an AI-built site Auto Mobile is doing your mobile layout.

What is limit scaling?

Limit scaling is the mobile version of max width. It caps how much elements grow on mobile screens 700px and wider. It's on by default, Wix recommends leaving it on, and it works separately from Auto Mobile. The toggle sits in Customize Breakpoints.

How does max width work?

Max width stops elements that scale proportionally from growing past a set width. New sites start at 1920px. On wider screens, elements stay at that size and the page gets margins either side.

Change it under Customize Breakpoints, Apply max width. You can exclude a single section from the Design tab of the Inspector, under Responsive behavior. You can also exclude a page's existing sections from the page's Layout settings.

Be careful turning it off for the whole site. Once it's off site-wide, you can't switch it back on for individual sections.

How should you size elements?

Sizes show as px*, a pixel value for the current breakpoint with a responsive unit underneath. Hover over it to see the real unit. Then pick a responsive behaviour in the Inspector's Design tab:

• Scale proportionally keeps the aspect ratio.
• Relative width follows the parent's width.
• Fixed never resizes.
• Stretch fills the parent.
• Hug fits the content, and is the default for horizontal stacks.

Sections can be Auto height, Fixed height or Fit to screen. Vertical spacing between elements is Automatic by default on single-cell sections and containers, and you can only change it on desktop. It's locked to Manual on sections set to Fit to screen.

How do you keep elements in place while scrolling?

Studio Two has three position types: Default, which scrolls away with the page, Sticky and Pinned. Sticky holds an element once it reaches the edge of the screen and can be overridden on smaller breakpoints. Pinned keeps it visible all the time, applies on every breakpoint, and only works for sections at the top or bottom of a page.

For a header that stays at the top, Wix recommends the header's Freeze scroll effect rather than Pinned.

If you'd like a Studio Two build that works properly on every screen, see our Wix Studio 2 service, or read how to prepare your Wix site for Wix Studio 2.

Questions people ask

Can I have different breakpoints on different pages?

No. In Studio Two breakpoints are site-wide. That's a change from the Studio Editor, where you set them per page.

Does Aria design the mobile version?

No. Wix says Aria works on desktop only, and Auto Mobile handles the mobile layout.

Why did my mobile edits stop updating from desktop?

You probably turned Auto Mobile off for that section by adjusting it on mobile, changing a responsive behaviour there, or hiding an element on mobile. Turn it back on for the section from the mobile breakpoint.

What happens if I delete a breakpoint?

The breakpoint below takes over its range, and every customisation you made on the deleted breakpoint is lost, across the whole site.