Design for tablets and phones

Breakpoints

• The canvas shows each page once per breakpoint, side by side. Choose a breakpoint in the top bar: your changes then apply to it.
• On the primary breakpoint (usually Desktop), a change sets the layer's own style. On any other breakpoint, a change is an override: it applies to that breakpoint and to the narrower ones that inherit from it.
• Edit breakpoints, next to the breakpoints in the top bar, adds, renames, resizes and deletes breakpoints. Each breakpoint narrower than the primary one inherits from the next wider one, and a project keeps at least three.

See where a value comes from

On a breakpoint other than the primary one, the fields of the Properties panel show where their value comes from:

• A filled dot means the value is overridden on this breakpoint. Its menu has Reset to Desktop, back to the value it inherits, and Push to Desktop, which makes this value the inherited one.
• A hollow dot means the value comes from another breakpoint's override, for example "Inherited from Tablet".

Reset all overrides on this breakpoint, in the command palette, removes every override of the selection on the breakpoint you're on.

Hide or reorder layers per breakpoint

• The Visible on Phone switch (with your breakpoint's name) in Position hides a layer on that breakpoint only. The Layers panel marks its row. Hide or show on this breakpoint is also in the command palette.
• Reordering the layers of a stack or a grid on a breakpoint other than the primary one changes their order there only. Reset order on this breakpoint puts it back.