top of page

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

Anchor
Anchor
Anchor

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.

Open advanced exercise on the editor →

{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.

Blue background with 2 shaded blue containers, one on top of the other with a smaller white logo in the center of the boxes.

DESIGN & LAYOUTING

Sizing

Discover the difference between Fixed, Fluid and Scale Proportionally.

Icon for measurements. A small rectangle with a smaller one inside it on the left side.

DESIGN & LAYOUTING

Measurements

Learn when to use the right CSS units of measure to control how elements resize.

Blue background with a darker blue box over it, there is an white icon in the middle of the box. This shows docking & margins.

DESIGN & LAYOUTING

Docking & Margins

Explore Editor X’s smart docking system.

Blue background showing a lighter blue container in the middle of the box. There is a white icon in the box.

DESIGN & LAYOUTING

Containers

Find out how to organize your content in containers.

Related learning resources.

Thumbnail indicating breakpoints. Green background with a green shaded box over it and a white icon in the middle.

LESSONS & EXERCISES

Breakpoints Part 2

Get to know the cascading rule and how to override it.

Video tutorial about breakpoints on Editor X

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.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

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 introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

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.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

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.

See all results ▶
ACADEMY MENU ▶
Search icon
bottom of page