Making a static layout responsive: step-by-step

This article walks you through a complete, repeatable process for taking a finished desktop design and making it fully responsive. Follow these five steps in order and you’ll have a layout that works well at every screen size.

Before you start

Make sure your desktop design is complete and visually polished before starting the responsive pass. Trying to do both at once makes it harder to reason about what’s a design decision and what’s a responsive fix.

Step 1: Lock in the base (desktop) layout

With no breakpoint active, finalize your full desktop layout. Check:

• Typography sizes, weights, and line heights look right at desktop widths.
• Columns, grids, and flexbox containers are correctly sized.
• Images, videos, and other media fit their containers.
• Navigation, header, and footer are complete.

Your goal in this step is a design you’d be happy shipping as a desktop-only site. Don’t worry about any other screen size yet.

Step 2: Find where the layout breaks

Click the width slider handle at the bottom of the canvas and drag it slowly from your widest design width down toward the mobile range. Watch for:

• Horizontal overflow: Content that escapes its container.
• Text collisions: Headlines or captions that overlap other elements.
• Collapsed columns: Multi-column layouts that become unreadably narrow.
• Navigation overflow: Menu items that wrap or fall off-screen.

Note the pixel values where each problem appears. You’ll use these to set your breakpoints.

Step 3: Fix the tablet layout at 768 px

Enter breakpoint mode at the Tablet (768 px) breakpoint. Work through each problem you identified in Step 2 that manifests at or above 768 px:

• Reduce column counts. A 4-column grid often works as 2 columns at tablet. Select the grid container and update grid-template-columns in the Style pane.
• Change flex direction. A horizontal flex-direction: row layout often needs to become flex-direction: column at this size.
• Adjust font sizes. Very large display headings may need to scale down. Use the Font Size control in the Style pane.
• Address navigation. Hide the desktop nav and show a hamburger menu button if you have one (see Hide and show elements at breakpoints).

Exit breakpoint mode and use the width slider to verify the tablet range looks correct.

Step 4: Fix the mobile layout at 480 px

Enter breakpoint mode at the Mobile (480 px) breakpoint. The issues here are typically more severe than at tablet:

• Single-column layouts often need even more vertical breathing room — increase padding and margins.
• Body text may need to be slightly smaller.
• Images that were side-by-side should now stack vertically.
• Touch targets (buttons, links) should be at least 44 px tall.
• Any elements that were still multi-column at tablet likely need to go single-column here.

Exit breakpoint mode and check the mobile range with the width slider.

Step 5: Verify the full range

Drag the width slider slowly across the entire range — from your widest width down to the narrowest. You’re looking for:

• Any intermediate widths where the layout breaks unexpectedly (often between named breakpoints).
• Transitions between breakpoints that feel abrupt or jarring.
• Anything you missed in Steps 3 and 4.

If you find a new problem at, say, 900 px, add a custom breakpoint there (see Custom breakpoints) and fix it in breakpoint mode.

Checklist before you ship

• Width slider dragged slowly: no overflow at any width.
• Navigation works at mobile size.
• All text is readable (minimum 16 px body, sufficient contrast).
• Touch targets are at least 44 px.
• Images load at the correct size (Picture element or srcset set up).
• No content is accidentally hidden at any breakpoint.