How to work with Breakpoints

Learn what Breakpoints are and how to work with them to make your site look good on every screen size.

In this tutorial, we’ll go over Breakpoints. A Breakpoint represents a range of viewport sizes where you can adjust a website’s layout or style. Each breakpoint has a starting point, an end point and a range in between.

There are three Breakpoints in the Wix Studio Editor: Desktop, tablet and mobile.

Any changes you make to your design or layout on higher Breakpoints will cascade down to smaller ones, but not the other way around. That's called the cascading rule. But, if you make a change on a lower Breakpoint manually, it’s called an override.

Some edits are considered Global changes, which affect every Breakpoint, including structural changes like adding and removing elements, applying the Pinned position and reparenting elements.

Transcript

Hey, I’m Kayla from the Wix Studio team. I’m going to show you how to work with breakpoints.

Not all desktop, tablet and mobile screens are the same size, so instead of editing for thousands of unique screen sizes, we edit for ranges of screen size.

The default breakpoints on Wix Studio are 1001 pixels and up for desktop, 751 to 1000 for tablet and 320 to 750 for mobile.

And a breakpoint is the point where we jump up from one screen range into another.

You can check how your design will behave on different screen and browser window sizes within the same breakpoint using the resize handles in the Studio Editor.

And once you let go, they’ll snap back to the default canvas size.

The default canvas size for desktop is 1280 pixels, but you can change your default size per breakpoint by typing a new value here on any of your breakpoints and then confirming.

Then, to see your site in other screen sizes within a breakpoint, just use the handles or in Preview, resize with the handles to see the site move through every breakpoint.

When you make changes to your CSS properties on a higher breakpoint, that change is automatically reflected in any lower breakpoints, but not the other way around. This is called the cascading rule.

There is a caveat to this, called an override.

Let’s change this button’s color to see an override in action.

So if you switch to the tablet breakpoint and edit that button again, it’ll cascade down to the mobile breakpoint, but the desktop will stay the same.

In the same way, if we make a change on mobile, it won’t affect the other breakpoints.

So if you were to make changes in lower breakpoints, they’ll persist even when you change that property on a higher breakpoint.

To reconnect a lower breakpoint to the next breakpoint up, you just need to right click the element with the property you wanna reconnect and choose Remove overrides.

If you want the design in desktop to be used in all breakpoints again, you can reconnect them all by right-clicking and choosing Use on All Breakpoints.

You can create overrides for any CSS properties, including size, color, docking and positioning, but not for structural or HTML content that affect all the breakpoints, like pinning an element, changing an image, or reparenting an element.

So now you know how to work between different breakpoints.

Catch you in the next video.