top of page

Diving into 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.

What do you think about the course so far?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

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.

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

EXPLORE MORE TUTORIALS

TUTORIAL

Grid

TUTORIAL

How to hide & display elements per breakpoint

TUTORIAL

How to build a full height section

Close Site Navigation
bottom of page