Ido Hershkovits profile picture

Ido Hershkovits

Technical Designer

,

November 25, 2021

The cascading rule on Editor X.

Technical Designer Ido Hershkovits offers an in-depth look at the cascading rule on Editor X. Learn when it applies–and when it doesn’t–and what to pay attention to when designing across breakpoints.

The cascading rule explained.

What is the cascading rule on Editor X?

When we build a responsive website on Editor X, we can change the layout and design for different screen sizes using breakpoints. The cascading rule means layout or style changes made on a specific breakpoint trickle down to smaller breakpoints, but will not affect any breakpoints above.

When does the cascading rule apply?

The cascading rule applies to style changes such as:

  • Font style, alignment or size

  • Image crop or opacity

  • Container styles such as color

It also applies to layout changes including:

  • Adding or adjusting a grid

  • Size, margins, padding and docking properties of an element

Certain changes apply to all breakpoints.

It’s important to pay attention to two types of property changes that don’t follow the cascading rule:


1. Data: changing or deleting page content such as text, media or images will apply to every breakpoint


Note: If you don’t want an element to display at a certain breakpoint, select the element and click the three dots on the floating action bar. Choose Don’t Display from the dropdown. This will hide the element at that breakpoint.


2. Structure: When you re-parent an element or remove an element from a Stack, it changes the page hierarchy. You will see structural changes reflected across all breakpoints

The cascading rule explained.
What is the cascading rule on Editor X?
When does the cascading rule apply?
Certain changes apply to all breakpoints.
Ido Hershkovits profile picture

Ido Hershkovits

Technical Designer

I’m a web developer and Editor X specialist based in Tel Aviv. I work closely alongside the Editor X marketing team as a coding and responsive design expert. In my spare time, I’m a passionate musician and producer.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search 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 ▶