CSS Breakpoint Checker: What Viewport Breakpoint Am I In?
CSS Breakpoint Checker. Resize your window or enter a width in this CSS breakpoint checker to see your Active Breakpoint and its media query. The free viewport size checker checks your input against current best practices and flags anything worth fixing.
Interactive Tool
Your Current Breakpoint
Viewport width in CSS pixels. Starts as your current window width; type another width to check it.
Pick a common phone or tablet width to override the field above.
Tailwind breakpoints
Zoom changes which breakpoint you land in, since these ranges are measured in CSS pixels, not physical ones.
The CSS Breakpoint Checker reads your current viewport width and reports which standard responsive breakpoint — XS through XXL — you're sitting in right now, updating live as you resize the window. Grab the matching media query with the copy button below, and you've got exactly what you need for a bug report or a CSS fix without ever opening DevTools.
Typing what CSS breakpoint am I in checker into a search bar means you want one answer: which layout tier your screen width triggers right now. Enter your viewport width in this CSS breakpoint checker and you get the matching Tailwind and Bootstrap tier, so a developer or designer can debug a responsive layout on any smartphone, tablet or desktop in seconds.
What CSS Breakpoint Am I In Checker: Reading Your Viewport Width
Think of it as a breakpoint inspector and a responsive breakpoint checker in one box. It compares a single number, the width of your window in CSS pixels, against a list of min-width values and returns the largest one you have reached. With a set of breakpoints \(B\) and a width \(w\): The screen size estimator tool works out the exact figure live as you type, with the formula shown alongside the result.
Take a window that reports 834 px. It clears 640 and 768 but not 1024, so Tailwind labels it md and the other one places it in its medium range. Drag it to 1030 px and both frameworks jump a tier, which is the moment a sidebar or grid layout should change. The screen height and display resolution do not matter here; only the CSS width does.
Reading the Breakpoint Ruler
The breakpoint ruler is a bar from 0 to 1920 (with 1440 as a common stop) with a marker at your current width. Every tier boundary sits on the bar, so you see at a glance how far the screen is from the next layout shift. A marker at 760 means the next tier is only 8 px away.
Quick Presets for Common Device Widths
Instead of resizing your browser by hand, tap a preset: 360, 375, 390, 428 or 430 for an iPhone or Android handset, and 768 for an iPad. Each tap moves the slider, so you can step through realistic widths in a few clicks.
What Is a Responsive Breakpoint in Media Queries?
A breakpoint is a screen width at which the layout of a page changes. Developers define each one with a media query in the stylesheet, so the browser swaps one rule set for another as the display grows or shrinks. Good web design relies on these switch points to keep text readable instead of squeezing a desktop page onto a small screen, and fluid layouts fill the space between them. Responsive design breakpoints are simply the widths where that handover happens. Use the free monitor count detector online to confirm everything looks correct before you rely on it elsewhere.
Media queries are what the checker's tier points at: the tier it reports tells you which rule is active, so you need fewer of them. Each one adds rules you must test, and every extra one makes a defect harder to trace. Together, the media query breakpoints in your stylesheet define the whole responsive web design of the site.
Writing a Breakpoint with the @media Rule
The @media rule takes a media type such as screen and a condition, and its styles only apply when the condition is true:
@media (min-width: 768px)applies upward from that width, which suits mobile-first stylesheets.@media (max-width: 767px)applies below it, which suits desktop-first stylesheets.
A mismatch between the two is the classic off-by-one bug, so check one pixel on each side.
Standard CSS Breakpoints by Screen Size
No single list fits every project. Most teams start with standard breakpoints from a framework, then add custom breakpoints where their own design strains. The table pairs each tier with the hardware that lands in it.
| Tier | Tailwind CSS | Bootstrap | Typical device |
|---|---|---|---|
| Small | sm 640 | sm 576 | Large handset, landscape |
| Medium | md 768 | same | iPad, portrait |
| Large | lg 1024 | lg 992 | Small laptop |
| Extra large | xl 1280 | xl 1200 | 1366 notebook |
| Double extra large | 2xl 1536 | xxl 1400 | 1920 Full HD desktop |
Tailwind CSS Tiers and Their Values
Both frameworks are mobile-first: base styles cover everything below the first tier, and each larger tier only adds rules. The checker matches your width to the largest tier whose min-width you have reached. Framework breakpoints are handy labels, but your content decides whether they fit.
Common Phone, Tablet and Laptop Widths
A handset reports 360 to 430 CSS pixels, so a rule at 600 is not aimed at it. W3Schools groups extra small devices, medium devices, large devices and extra large devices into five bands that map onto these clusters. Widths of 1920 and above fall in the top tier, so check a wide monitor too.
Layout Changes at Responsive Breakpoints
At each tier the layout should change for a reason you can name: fewer columns, a collapsed menu, smaller typography, tighter spacing or a hidden sidebar, or fewer grid tracks. These shifts protect the user experience.
Navigation, Columns and Grid Shifts
The desktop navigation usually folds into a hamburger menu at the medium tier. Check that the mobile menu opens, sits above the hero and closes again. A grid layout that shows four items per row often drops to two at mid widths, and a flexbox row wraps to one. Resize the images in step with it.
Horizontal Overflow at Narrow Widths
It happens when a table, code block or fixed-width image is wider than the screen, and the page gains a scrollbar. It shows up most at 320 to 414 px. If the page scrolls sideways, read your width in the checker and find the tier whose rule fails.
Content Priorities in Responsive Design
Narrow screens force choices. Below the first tier, keep the main action and text first on mobile and move secondary blocks below, which also helps performance for a mobile user on a slow connection.
Debugging a Pricing Layout with the Breakpoint Inspector
A client reports that their pricing page shows two cards per row on my machine but three in the design file. I need to know why before I touch any CSS, so I open the page in a half-screen window and read the width the checker reports.
The reading is 1013 px. The card row uses Tailwind's lg:grid-cols-3, and lg starts at 1024 px, so the checker puts me in md, 11 px short. That explains the two cards exactly. It is not a bug; the window sits just under the tier.
Before I trust it, I cross-check by hand: 1013 sits between the md and lg boundaries, so md is correct. I also try the second set of defaults, and since its large tier starts at 992, the same window would already be large there.
| Reading | Tailwind tier | Cards per row |
|---|---|---|
| 1013 px | md | 2 |
| 1024 px | lg | 3 |
| 1100 px | large | 3 |
The rerun is the useful part: widening by only 11 px flips the layout, so the design is fragile exactly where half-screen windows land. One caveat matters here. Media queries measure the viewport including a classic scrollbar, so the 1013 px I read is what the CSS sees, but the usable content area is about 15 px narrower. A docked dev tools panel shrinks the viewport as well, so I close it before testing.
My call: keep the default, since changing it affects every page, and add a custom min-width: 960px rule for this one row. Then I recheck at 959 and 960 to confirm the cards switch exactly there. The number to watch is the distance to the next tier, because a layout that sits 11 px away from a switch will look broken to someone.
Device Breakpoints vs Content-Based Breakpoints for Any Viewport
Device-based breakpoints follow common hardware sizes, while content-based breakpoints sit where your layout visibly strains. Component breakpoints and orientation breakpoints refine either. The device fragmentation problem is why best practices favour content-based values: no list of devices stays current.
What Is a Mobile Breakpoint?
A mobile breakpoint is the width below which the single-column layout applies, often 767 or 600 px.
How Rotation and Preference Media Queries Affect Your Tier
Rotating a handset swaps its width and height, so the checker can report a different tier, while preference queries never change it. The orientation: landscape feature restyles a page when a handset rotates, and prefers-reduced-motion switches off animation for users who ask. A media query can also hide an element on a small screen.
Responsive Testing Checklist for Every Breakpoint
Use this short list each time you ship a layout change:
- Every breakpoint has a clear layout reason.
- No page relies on hidden horizontal overflow.
- Transitions work before, at and after each threshold.
- Duplicate responsive rules are removed during cleanup, to catch a regression early.
Check the In-Between Widths
Defects appear between tiers more often than on them. Test 20 px below, exactly at and 20 px above every breakpoint, plus 320 for accessibility under WCAG reflow.
Real Browsers and Device Presets
Dev tools approximate a phone, but real browsers and real devices expose scaling quirks. Automated testing with a screenshot at every tier beats manual testing on a big site, and visual testing compares each screenshot with the last. Step through the checker's presets for the in-between values, and keep a preset breakpoints list in your test config. Run this test on every deploy.
Frequently Asked Questions
- How do I find out which CSS breakpoint I am in?
- Enter your viewport width in CSS pixels or pick a preset. The checker returns the largest min-width tier at or below that width, such as md for 768 to 1023 px in Tailwind.
- What are the default Tailwind CSS breakpoints?
- Tailwind's defaults are sm 640 px, md 768 px, lg 1024 px, xl 1280 px and 2xl 1536 px. All of them are min-width rules, so a layout is mobile-first and grows upward.
- What is the difference between min-width and max-width media queries?
- A min-width query applies from that width upward and suits mobile-first CSS. A max-width query applies at or below that width and suits desktop-first CSS.
- Why does my phone report a small width even though its screen has many pixels?
- CSS uses device-independent pixels. Most phones report 360 to 430 CSS pixels wide no matter how many physical pixels the display has.
- What width should I test first?
- Test 320 px for the narrowest supported layout, then a typical phone, 768 px for tablets, 1024 px for small laptops and 1920 px for full HD desktops.
- Why test just below a breakpoint and not only at it?
- Bugs often appear one pixel short of a switch, for example a menu that collapses at max-width 767 px. Check before, at and after each breakpoint.
- Does the browser scrollbar change my breakpoint reading?
- Media queries measure the viewport width including a classic scrollbar, so the reading matches what your CSS sees even though the visible content area is slightly narrower.