Studio Editor: Designing Across Breakpoints

4 min read
The Studio Editor lets you tailor sites per breakpoint, so they always look great. Breakpoints are screen size ranges, representing the possible screens and devices that visitors tend to use (e.g. tablet, mobile).
The design you create on desktop trickles down to tablet and mobile. However, you can create overrides to make the design fit smaller screens. Click a breakpoint icon at the top to get started. 
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.
In this article, learn more about:
Each breakpoint has a default editing size (screen width) that you can change to your needs. 

Defining breakpoints

The Studio Editor comes with 3 built-in breakpoints, which you can customize and re-define at any point:
  • Desktop: 1001px and up
  • Tablet: 751px - 1000px
  • Mobile: 320px - 750px
You can add up to 3 additional breakpoints to make your design even more precise to certain screen sizes.
You define the breakpoints separately for every site page and every global section. This means that a global section and the page it's on can have completely different breakpoints. 
For example, the page below has 5 breakpoints defined:
The breakpoints panel for a site page
... While the global header on that page has 3 breakpoints defined: 
The breakpoints panel for a global header, showing there are different BPs than those of the page

Cascading design

The Studio Editor uses a cascading concept when it comes to designing across breakpoints. Changes you make on larger breakpoints trickle down to smaller breakpoints, but changes on smaller breakpoints don't affect larger breakpoints. 
For example, a button that is designed to be purple on desktop is automatically purple on tablet and mobile. If you change its color on mobile, the button is still purple on tablet and desktop.
Some changes apply to all breakpoints – for example, when you replace or delete elements. Learn more about these changes in the section below. 
A chart showing how breakpoints affect each other according to the cascading concept

Changes that apply to all breakpoints

Some types of actions automatically apply to all breakpoints, and cannot be customized to a certain viewport.

Data changes

When editing the content of an element, you're effectively changing its data. For example, changing an element's link or the source of an image applies to all breakpoints. 
A screenshot of a message you see in the Editor when making a data change as it affects all breakpoints
Another example is when you replace or delete elements from the page – the element is automatically replaced / deleted on all breakpoints.
Did you know?
You can hide elements from specific breakpoints. Go to the relevant breakpoint, right-click the element and select Don't Display.

Structural changes

Changes to an element's place in the hierarchy of your page. For example, when you stack elements together or move an element to a different cell, you're changing the page structure and it is reflected across all breakpoints. 
A screenshot of the message you see in the Editor when trying to reparent an element, an action that affects all breakpoints

Creating overrides with breakpoints

An override occurs when you make changes to an element's design on a specific breakpoint. Meaning, it no longer draws design values from the larger breakpoint above it. However, these overrides do trickle down to smaller breakpoints.
There are 2 types of overrides you can create:
  • Design: Changes to an element's properties, such as coloration, border and font. 
  • Layout: Changes to an element's position and size, as long as it does not move to a different parent element. 
Elements and sections in the Studio Editor come with a built-in responsive behavior. This controls the way they are resized on smaller breakpoints, so you don't have to worry about setting it all manually.

Removing design overrides on a specific breakpoint

You can always reset the design and layout of an element back to its properties on the largest breakpoint.
The properties of the element on smaller breakpoints are not affected, just the breakpoint that contains the element that you are reverting back. For example, if you're removing overrides on tablet, it does not affect mobile.

To remove design overrides on a breakpoint:

  1. Select the relevant element.
  2. Click the More Actions icon .
  3. Click Remove Overrides.
A screenshot of a button in the tablet breakpoint in the Editor, clicking to remove any overrides

Did this help?