Add and change styles, determine style inheritance, and clear styles using breakpoints in the Designer.
Setting styles on one breakpoint, like Desktop, can affect values on other breakpoints. These style values cascade down through different breakpoints — changes on desktop will cascade down to tablet, mobile landscape and mobile portrait. Likewise, changes to other breakpoints will cascade down.
This cascading nature applies to all styles (e.g. element tag styles cascading down to classes) unless a style is overwritten. This is best seen in the examples provided below.
To add or change styles on any breakpoint:
To demonstrate how adding styles will cascade those styles down, we’ll be using an example of three buttons sitting side by side in a section.
To fix the buttons running into each other on the mobile landscape breakpoint, we set each button’s display setting to block so they stack vertically and added some bottom margin to create space. These changes will cascade down to mobile portrait as well.
Changing values will also cascade down to smaller breakpoints. If we go back to desktop and change the padding and set the background color to green, we can see that these changes cascade down through all four breakpoints.
You can override these cascading styles for a breakpoint at anytime by changing the values while on that specific breakpoint.
On tablet breakpoint, let’s change the background color to purple. Going back to Desktop breakpoint, the background remains the same as before—green. Both mobile breakpoints however, show the newly updated purple background color. This is because the styles cascade down through breakpoints, but not up.
When you go to any breakpoint, you can determine where a style is coming from. It can be coming from a styles on the same breakpoint or on a higher breakpoint. You can see the inheritance of a style in the Style Panel by clicking the blue or orange labels and icons next to style properties.
You can clear a set style value anytime by clicking on the blue or pink indicator (text or icon label next to the style) and choose Remove this style. You can also hold option/alt on the keyboard and click the indicator to quickly remove it.
If we have a style on Tablet breakpoint that is cascading down to Mobile breakpoints, clearing that style on Tablet will make the Mobile breakpoints inherit the style from Desktop as well.