Make it responsive

In this tutorial you take a page that looks right on desktop and tune it for tablets and phones. You learn where a style value comes from, how to reset it, and how to build layouts that adapt on their own. Use the page from the Build a landing page tutorial, or any page with a hero and a row of cards.

Pick a breakpoint

1. Look at all three artboards

   Open the page. The canvas shows one artboard per breakpoint: Desktop (1440 px), Tablet (768 px) and Phone (390 px). They all render the same page, so a problem on phones is visible while you work on desktop.

2. Switch with the breakpoint switcher

   The breakpoint switcher sits in the toolbar, next to the page switcher: a monitor, a tablet and a phone icon. Pick the tablet icon. The camera moves to the tablet artboard, and the inspector header now reads Editing Tablet.

3. Know which way styles flow

   Styles flow from large to small. Desktop values apply everywhere. Tablet values override desktop on tablets and phones. Phone values override both, on phones only. A change on desktop never touches the smaller breakpoints where you set your own value.

Read and reset overrides

1. Change a value on tablet

   With Tablet active, select the hero and change its Padding in the Layout section. Only the tablet and phone artboards change.

2. Read the dot next to the label

   A small dot now shows next to Padding. Hover the label to read where the value comes from: Set on Tablet for a value you set here, Inherited from Desktop for a value that comes from a larger breakpoint, or From class .feature-card for a value that comes from a class.

3. Reset it

   Click the dot, or hold ⌥ and click the label. The tablet value is removed and the hero takes the desktop padding again.

Let rows wrap

1. Turn on Wrap

   Switch back to Desktop and select the feature row. In Layout → Direction, turn on the Wrap switch next to the arrows. When the cards no longer fit, they move to a new line instead of shrinking.

2. Give the cards a minimum width

   Select one card. Hover the Size section header and press + (Add min/max). In the new Min row, set W to 280px. The cards now wrap as soon as each one would get narrower than 280 px.

3. Add a gap

   Select the row again and set Gap in Layout. The same gap separates the cards side by side and on top of each other.

Use fluid sizes

1. Fill the width

   Select the hero image. In Size, set the Width mode to Fill. The image takes the full width of its parent on every breakpoint.

2. Cap it with a maximum

   Press + (Add min/max) in the Size header and set W in the Max row to 960px. On desktop the image stops at 960 px; on tablet and phone it still fills the width.

3. Try a relative width

   Select the hero text group and set the Width mode to Relative, then type 80 (the unit is %). Relative widths follow the parent, so the text keeps the same proportion on every screen.

Tune phones

1. Switch to Phone

   Pick the phone icon in the breakpoint switcher. The inspector header reads Editing Phone.

2. Make the headline smaller

   Select the headline. In Typography, lower the font size in the Style row, for example from 56px to 36px. Desktop and tablet keep their size.

3. Stack the hero

   If the hero is a horizontal stack, set Layout → Direction to Vertical (the down arrow) on phone. Lower its Padding too, so the content has room.

Check the result

1. Preview

   Press ⌘↵ to preview. Then press it again to go back to editing.

2. Review each breakpoint

   Pick each breakpoint in turn and scan the page. Select an element and hover its labels to see which values are set on that breakpoint.

What you learned

• Desktop values flow down to tablet and phone; a smaller breakpoint only stores what you change there.
• The dot next to a label tells you where a value comes from, and clicking it resets the value.
• Wrap, min and max sizes, Fill and Relative widths adapt on their own, so you need fewer overrides.

Keep going with the next tutorials, or read the guides behind this one: