The width slider (Responsifier)

The width slider — also called the Responsifier — lets you preview your design at any viewport width by dragging a handle at the bottom of the canvas. It is a diagnostic tool, not an editing tool: dragging the slider never changes any styles.

Where to find it

The width slider lives in the horizontal bar directly below the canvas. You’ll see a track with a draggable handle and, depending on your project’s breakpoints, a series of small dashed lines marking the breakpoint positions.

The current simulated viewport width is displayed as a pixel value next to the handle — for example, 768 px — so you always know exactly what size you’re previewing.

Dragging the slider

Click and drag the handle left or right to simulate narrower or wider viewports:

• Drag left to simulate a narrower screen (tablet, phone).
• Drag right to simulate a wider screen (desktop, ultrawide).

The canvas reflows in real time as you drag. Any responsive styles you’ve applied will activate and deactivate as the simulated width crosses each breakpoint.

Breakpoint lines on the slider

The dashed vertical lines on the slider track correspond to your project’s breakpoints. Each line represents the pixel value at which your layout should shift.

• Clicking a dashed line jumps the slider directly to that breakpoint width, so you can quickly check exactly how your design looks at each defined size.
• If you’ve added custom breakpoints, their lines appear on the track automatically.

Using the slider as a diagnostic tool

The most effective way to use the width slider is to drag it slowly across the full range from your widest to your narrowest width. Watch for:

• Content that overflows — text or images that bleed outside their containers.
• Columns that become too narrow — text that wraps awkwardly or images that lose their aspect ratio.
• Gaps and overlaps — elements that collide or leave large empty spaces.
• Navigation that breaks — a desktop nav menu that no longer fits at a narrower width.

When you find a problem, note the pixel value displayed next to the handle. That’s the width where you need to add a breakpoint and enter breakpoint mode to fix the layout.

Slider vs. breakpoint mode

Use the width slider to find problems, then switch to breakpoint mode to fix them.