LESSON 09

Breakpoints.

A breakpoint is where you can adjust a website’s layout or style for different viewport sizes. Each breakpoint has a starting point, an end point and a range in between. Editor X has 3 default breakpoints at common device sizes: desktop, tablet and mobile. Jump between breakpoints, customize them and add new ones using the breakpoint navigator above your canvas.

Same structure, new design.

The structure, (parenting hierarchy) and data, (text, media etc.) of your site always stay the same, but at every breakpoint you can customize the layout and style of your content.

The cascading rule.

Changes you make to a site’s layout or style always trickle down to smaller breakpoints. For example, if you make a change on desktop, you’ll see it on mobile—but if you make a change on mobile, the desktop design won’t be affected.

Changes per breakpoint.

When you’re working at a smaller breakpoint and you make a layout or style change, this automatically overrides any changes that cascaded down. For example, if you change a button’s color on tablet, you override all the changes you made to that button on desktop—but because tablet is larger than mobile, your new change will still trickle down to mobile.

TRY IT YOURSELF

Exercise on Breakpoints.

​Open Academy X from desktop to complete this exercise.

01

Exploring the breakpoint navigator. Use the breakpoint navigator at the top of your canvas to jump between breakpoints. Notice how the button changes between desktop, tablet and mobile views.

02

Style change on desktop. Go to the desktop breakpoint, select the button and click the design icon. Change the background color. Now use the breakpoint navigator to see how this change cascades to tablet and mobile.

03

Style change on tablet. Go to the tablet breakpoint and choose a new background color for the button. From the breakpoint navigator, check how the color changes at different viewports.

04

Style change on mobile. Go to the mobile breakpoint and choose another new background color. From the breakpoint navigator, check how the color changes at different viewports.

Watch related videos.