Editor X Essentials
Breakpoints part 1.
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.
{Section Title}
{Section Description}
{Section Title}
{Section Description}
{Section Title}
{Section Description}
Intro
TRY IT YOURSELF
Exercise on breakpoints part 1.
Open Academy X from desktop to complete this exercise.
01
Explore 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.
{No.}
{Exercise Description}
Open Academy X from desktop to complete this exercise.
Did you find this resource helpful?
Thank you for your feedback!
Next lessons.
DESIGN & LAYOUTING
Sizing
Discover the difference between Fixed, Fluid and Scale Proportionally.
DESIGN & LAYOUTING
Measurements
Learn when to use the right CSS units of measure to control how elements resize.
Related learning resources.
LESSONS & EXERCISES
Breakpoints Part 2
Get to know the cascading rule and how to override it.
▶
VIDEO LIBRARY
Breakpoints
Learn how to edit element style, position and behavior at every viewport width.
▶
VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶
LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶
Ready to start creating?
Top searches
People are searching for
VIDEO LIBRARY
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
VIDEO LIBRARY
Getting Started
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.
LESSONS & EXERCISES
Hover Interactions
Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.