How to Find the Breakpoints of Any Website
Three reliable ways to find a website's responsive breakpoints - reading the CSS media queries, watching the layout change, and using device tooling to confirm.
6 min read - Updated 2026-06-19
Whether you are auditing your own site or studying a competitor's, finding the exact widths where the layout changes is straightforward once you know where to look. Here are three ways, from precise to practical.
Method 1: read the media queries in DevTools
The most exact answer lives in the CSS. Open DevTools, go to the styles or sources panel, and look for @media rules. The min-width and max-width values in those rules are the literal breakpoints the site was built around.
Open DevTools and inspect the stylesheet
Search the CSS for '@media' to list every query
min-width and max-width values are the breakpoints
Watch for common framework values like 640, 768, 1024, 1280
Method 2: resize and watch the layout snap
If you cannot easily read the CSS, drag the window narrower and watch for the moments the layout reflows - a sidebar collapsing, a nav turning into a hamburger, columns stacking. Each of those jumps is a breakpoint. DevTools device mode shows the current width as you drag, so you can note the exact pixel value.
Slowly narrow the viewport and watch for layout jumps
Note the width at each reflow - that is a breakpoint
Hamburger menus and stacking columns are the clearest signals
Device mode shows the live pixel width while you resize
Method 3: confirm across real device widths
Reading values is one thing; confirming the layout actually behaves at and around each breakpoint is another. View the site at several widths at once so you can verify the transitions are clean - especially 20px on either side of each breakpoint, where bugs hide. A multi-device browser like Sizzy shows every width simultaneously instead of one at a time.
Test at, just below, and just above each breakpoint
Check the in-between zones, not only the round numbers
View multiple widths together to compare transitions
Capture screenshots of the riskiest breakpoint changes
Release checklist
List every @media rule in the site's CSS.
Note each width where the layout visibly reflows.
Test 20px below, at, and above every breakpoint.
Verify the transitions on real device widths, not just by resizing.
Frequently asked questions
How do I find a website's breakpoints?
Open DevTools and search the CSS for @media rules - the min-width and max-width values are the breakpoints. You can also resize the window and note the widths where the layout visibly changes.
What are common responsive breakpoints?
Frameworks gravitate toward 640px, 768px, 1024px, and 1280px, but every site sets its own. Always confirm by reading the actual CSS rather than assuming standard values.
How do I test a layout at its breakpoints?
Check the layout at, just below, and just above each breakpoint - the in-between zones are where bugs hide. Viewing several widths at once in a tool like Sizzy makes the transitions easy to compare.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.