Responsive Breakpoints

The responsive breakpoint system in Elements allows you to change component properties at different user defined breakpoints (i.e. Mobile, Table, Desktop, etc).

Breakpoints for a project be defined in the Screens area of the Theme Studio.

How do Breakpoints work?

If you pay attention, on the first “mobile” screensize you do not have any blue dots. As you move up to the next size (SM) you'll see grey dots beside the controls in the Component inspector. If you click on a grey dot (to turn it blue) you can override the setting for that control. Once you add a blue dot you will have that setting for everything above. It’s always left to right.

Watch the video below to see how this works in practice.