Check a layout across every breakpoint you support

I don't know exactly where my layout breaks, so I keep dragging the browser window narrower and guessing.

Beginner to intermediateRead 4 minDoing: about half an hour7 steps

What you'll have at the end

A written list of the exact widths where your layout breaks, found using the breakpoint bars.

Before you start

You need

A page whose CSS already defines at least one width-based breakpoint that changes the layout, open in Chrome with DevTools available.

Not covered

Deciding what width a new breakpoint should sit at, or writing the CSS to fix a gap once you've found one.

Leans on

7 steps

Picking breakpoints your content needs instead of a device preset

once a gap is written down, this recipe covers choosing the new breakpoint's width from the content itself instead of a device size

Checked 20 Aug 2026