Styling Across Breakpoints

 

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.

In this lesson
  1. Adding and changing styles
  2. Determining style inheritance
  3. Clearing styles

Adding and changing styles

Anytime you add to or change styles on an element tag or class in a breakpoint, the changes will cascade down to smaller breakpoints.

To add or change styles on any breakpoint:

  1. Click the device icon in the middle of the top bar in the Designer
  2. Select the element you want to style, if you haven't already
  3. Add or change styles in the style panel

Adding styles

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 styles

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.

 

Overriding styles

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.

 

Determining style inheritance

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.

 

Clearing style

You can clear a set style value anytime by clicking on the blue 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 blue 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.