Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Dec 31, 2020
Edited: Dec 31, 2020

Expert Tip: An in-depth look into Cascading in Editor X

When we build a responsive website in Editor X, we can apply different layouts and designs

using breakpoints for different devices and screen sizes.

Design changes made on a specific breakpoint will also affect the breakpoints below it, but will not have an affect on the breakpoints above.


This is the Cascading rule, and in this video we will explore what it is, when does it apply and not apply, and what we should pay attention to when designing on lower breakpoints.



8 comments

@Ido Hershkovits Would you say it makes more sense to design in Desktop. Then move to Tablet, which then Cascades down to mobile which means you don't need to make changes 3 times?

Feb 05Edited: Feb 05

Hey Lewis, Yes, I think thats definitely a good practice. because you finish everything on desktop and the then changes you make on tablet will not affect desktop, and the changes you make on mobile will not affect tablet an desktop (except for the cases that I mention in the video: content, reparenting etc..).

@Ido Hershkovits Thanks for your assistance on this tricky part of Editor X (at least for me)! The issue I'm constantly dealing with is designing on my 27" monitor -- I find that no matter how exact I am with the default Desktop breakpoint, I have to always design a 4th breakpoint to accommodate my 27" monitor. And yet, when I test out the Editor X templates, they never need an additional 4th breakpoint. I would love to bypass making a 4th breakpoint as it's rather time-consuming and another breakpoint I have to manage. Is there some secret tip about designing to avoid additional breakpoints that Editor X hasn't revealed yet? 😉 On a similar note, why is it that when you add a 4th breakpoint on one page, a 4th breakpoint isn't created for all the other pages automatically? I've never had a situation where a 4th breakpoint wasn't needed for every page, if I set it up for one page. Your feedback is appreciated!

Hey Marisa,

Im so glad that you found this video helpful. As for your first question regarding 27", what are the issues that you are experiencing that make you need another breakpoint?

As for you second question there are many cases where you don't necessarily need more than 3 breakpoints (I usually build with 3 breakpoints), and also many cases where users will use 4 breakpoints on a certain page and 6 breakpoints on another, every user is individual and we want to give as much flexibility as we can.

@Ido Hershkovits Thanks for your speedy reply! The main issue I experience is that when I stretch out the viewport to accommodate my larger screen, the page just falls apart -- text boxes scatter everywhere, pictures get repositioned, etc. Am I doomed to always have 4 breakpoints? 😫 Like I said, I test out your Editor X templates, and they never have 4 breakpoints -- even when adjusting for my 27" monitor size. Which leads me to believe I'm building out the breakpoints wrong....I can't figure out what else it could be.


Here's a site I'm currently working on:


https://marisahowenstine.editorx.io/h2wfinal


You'll see that the Contact section at the bottom shifts when I go from the 3rd Default breakpoint to my 4th breakpoint for the 27" monitor -- provided you have a screen big enough to view that! 😬 I'm also attaching what I'm talking about. (1st attachment is the 4th breakpoint, 2nd attachment is the 3rd breakpoint.)


Hope this is clear -- let me know if you'd like any more clarification. Thank you!



From what I can see the form is in a different cell of the grid in each breakpoint. if you use responsive sizing units in you sizing and margins you should be good.

Extremely insightful video and a must watch for anyone learning and using Editor X. The most common cascading issues that arise across breakpoints are addressed precisely in this concise video. Thanks Ido. 😎

Editor X

Design your boldest creations.