Free responsive design tool

CSS Breakpoint Checker

Paste breakpoint values, CSS media queries, or a Tailwind-ish screens config and get sorted breakpoints, gap and overlap warnings, device coverage, QA widths, and suggested fixes.

Browser size cheat sheet Viewport checker Breakpoint finder Screenshot generator QA checklist Viewport sizes guide iPhone viewport sizes

Current breakpoint check

0 warnings

5 breakpoints - 24 QA widths

Check breakpoints

CSS, Tailwind screens, or plain values

Root font size for rem/em

Breakpoints

Warnings

Devices

QA widths

Warnings and suggested fixes

Range issues are calculated in the browser from the pasted breakpoint rules.

No hard breakpoint conflicts found

good

The parsed values are sorted and do not show explicit range gaps or overlaps.

Still test just below, at, and above every boundary in a real browser.

Sorted breakpoint table

Parsed widths are normalized to CSS pixels and sorted from small to wide.

5 rows

Label	Min	Max	Range	Source
sm	640px	-	640px and up	Named value
md	768px	-	768px and up	Named value
lg	1024px	-	1024px and up	Named value
xl	1280px	-	1280px and up	Named value
2xl	1536px	-	1536px and up	Named value

Device coverage

Common viewport widths mapped against the active breakpoint rules.

Width	Viewport	Active rules	Nearest boundary
320px	Small phone Mobile - Old or narrow phones	Base styles	below first breakpoint; next sm at 640px
375px	iPhone SE Mobile - Small iPhone portrait	Base styles	below first breakpoint; next sm at 640px
393px	Modern iPhone Mobile - Common iPhone portrait	Base styles	below first breakpoint; next sm at 640px
412px	Pixel / Android Mobile - Common Android portrait	Base styles	below first breakpoint; next sm at 640px
430px	Large phone Mobile - Large phone portrait	Base styles	below first breakpoint; next sm at 640px
640px	Tailwind sm edge Breakpoint - Small tablet edge	sm	last sm at 640px; next md at 768px
768px	Tablet portrait Tablet - Common tablet breakpoint	sm, md	last md at 768px; next lg at 1024px
820px	iPad portrait Tablet - iPad portrait viewport	sm, md	last md at 768px; next lg at 1024px
1024px	Tablet landscape Tablet - iPad landscape/small laptop	sm, md, lg	last lg at 1024px; next xl at 1280px
1280px	Desktop Desktop - Desktop layout starts	sm, md, lg, xl	last xl at 1280px; next 2xl at 1536px
1366px	Laptop Desktop - Common laptop viewport	sm, md, lg, xl	last xl at 1280px; next 2xl at 1536px
1440px	Design desktop Desktop - Design review width	sm, md, lg, xl	last xl at 1280px; next 2xl at 1536px
1536px	Wide breakpoint Desktop - Tailwind 2xl edge	sm, md, lg, xl, 2xl	last 2xl at 1536px; no larger breakpoint
1920px	Wide monitor Desktop - Wide-screen sanity pass	sm, md, lg, xl, 2xl	last 2xl at 1536px; no larger breakpoint

QA widths

Test device targets plus just below, at, and above each breakpoint edge.

320px

375px

393px

412px

430px

639px

640px

641px

767px

768px

769px

820px

1023px

1024px

1025px

1279px

1280px

1281px

1366px

1440px

1535px

1536px

1537px

1920px

Suggested fixes

Sorted screens, CSS variables, media-query notes, and the QA width pack.

// Suggested Tailwind-ish screens, sorted from small to wide.
screens: {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
}

/* CSS custom properties */
:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* Mobile-first media-query notes */
@media (min-width: 640px) {
  /* sm: add only layout changes that are needed here. */
}
@media (min-width: 768px) {
  /* md: add only layout changes that are needed here. */
}
@media (min-width: 1024px) {
  /* lg: add only layout changes that are needed here. */
}
@media (min-width: 1280px) {
  /* xl: add only layout changes that are needed here. */
}
@media (min-width: 1536px) {
  /* 2xl: add only layout changes that are needed here. */
}

/* QA widths: 320, 375, 393, 412, 430, 639, 640, 641, 767, 768, 769, 820, 1023, 1024, 1025, 1279, 1280, 1281, 1366, 1440, 1535, 1536, 1537, 1920 */

Turn breakpoint cleanup into a real responsive QA pass

Use this checker to clean up the CSS edges, then move through the related Sizzy tools for viewport references, finder planning, screenshots, and release QA.

Browser size cheat sheet Viewport checker Breakpoint finder Screenshot generator QA checklist

Try Sizzy

What does this CSS breakpoint checker parse?

It reads Tailwind-style screens, plain breakpoint lists, min-width media queries, max-width media queries, and min/max range queries pasted into the browser.

How are gaps and overlaps detected?

For explicit min/max ranges, the checker compares each covered interval and flags missing pixels, inclusive overlaps, and uncovered device widths.

Should every warning become a new breakpoint?

No. Use the warnings to find risky viewport edges, then keep only breakpoints that fix a real layout problem in the product.