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.
@idoh 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?
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…).
@idoh 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.
@idoh 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.
Thank you – will give it a whirl! 
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. 
I am using lots of containers when working with EdX because from my practice I have less issues making changes in lower breakpoints. In a section I usually add a grid, then a container in a cell of grid and stack elements in the container. Am I right thinking it gives me more possibilities to make changes between elements in lower breakpoints not effecting the design in all breakpoints because I making changes in a parent container or it is overwhelmed and my practice is not good? Very useful video, thank you.
Extremely helpful!!! This worked out any issues I was having with breakpoints 
I was having similar issues to those of Marisa, spot on with small tweaks that made me approach breakpoints a bit differently…
Cool, but what if you just want to simplify the lower breakpoints’ versions of the web? A. i. you don’t want to display the image nor replace it with another, just eliminate all that empty space. How do we work around that? Thanks!
If you don’t want to display elements on lower breakpoints you can just right click on the element > Don’t Display. Remember that this will also cascade down.
So for example, if you hide an element on Tablet breakpoint, it will also be hidden on Mobile. You’ll still be able to show it again manually if you desire.
Thanks Jonathan, will this adjust the empty space automatically? In the video, the image goes away but the space remains.
In the video the image was placed inside a Grid Row which had min-height.
When choosing to hide an element it won’t reserve its spot on the page, so depending on the height of the parent it will collapse or remain the same height.
I see, thank you so much for your help.
Hello Editor X team.
I saw that when I apply a top margin of 18% to an image on the tablet breakpoint and then I go bak to the desktop breakpoint and change the same top margin to 13% it does not cascade down so when I go back to tablet it’s still 18%.
Does the cascading rule not apply to margins?
Thanks
Hey Dragos,
Once you make any change on lower breakpoint it overrides the cascading. so the specific property is overriden and will not get cascading from top.
Once you changed the value of top margin to 18% in Tablet, it will cascade to Mobile and won’t affect Desktop. and if you make any changes to Desktop it won’t cascade to Tablet and Mobile because the Tablet is overriden.
Hope I understand the question and it did help,
Yanay
Thank you, yes this answes my question. I was also wondering if there is a way to reset or override the changes I made to the margins of an image across breakpoints.
Yes sure. you can:
A) go to tablet > select the element that has overrides > right click (or the three dotted menu in the floating panel) > remove overrides.
or
B) go to any breakpoint > select the element that has overrides in any other breakpoints > right click (or the three dotted menu in the floating panel) > Use on all breakpoints (it will copy the properties from this breakpoint and apply to all other breakpoints.
