Responsive Checker

Responsive Checker renders the current page at several device widths at the same time, so you can see where a layout holds up and where it breaks without resizing your browser window.

Opening the Checker

1. Click the InspectDev icon to open the side panel
2. Select Responsive Checker from the toolbar
3. The panel expands into a full-width view split into viewport panes, each loaded with its own preset

Every pane is a live rendering of the page. Scrolling or interacting in one pane doesn't affect the others, so you can compare behaviour at each width independently.

Presets

Panes open with common device presets, shown as labels in the toolbar:

• iPhone 15 / 14 — phone width, where navigation usually collapses into a hamburger menu
• iPad Pro 11" — tablet width, the middle ground where layouts are most likely to be neglected
• 1440 x 900 — desktop width at a standard viewport height

Click a preset label to swap in a different device, or choose Add pane to open another viewport next to the ones you already have. Add as many as you need — the panes share the horizontal space.

What to Look For

Layout breaks — text wrapping badly, columns collapsing into each other, or spacing that only works at one width.

Overflow — any element wider than its viewport introduces a horizontal scrollbar. This is the most common responsive bug and the easiest to miss when you only ever test at your own window size.

Navigation changes — confirm the desktop nav becomes a hamburger menu at the right breakpoint, and that every item is still reachable once it does.

Tap targets — buttons and links that are comfortable with a mouse can become too small and too close together in the phone pane.

Exiting

Click Exit in the top-right corner to close the comparison view and return to the normal panel with the page at its original size.

Tips

• Open the panes before you start a layout change, then change a value in the CSS Inspector — every pane re-renders live and you see the effect at all widths at once
• If a pane shows horizontal scroll, the culprit is usually a fixed width, a long unbroken string, or a negative margin; the Page Ruler helps you find which
• Test at a width just below a breakpoint as well as one just above — most responsive bugs live in the boundary width