min-width vs max-width in Media Queries
How min-width and max-width media queries behave differently, which to choose, and how to avoid the overlap bugs that break layouts.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
The direction each query applies
min-width applies styles from a given width and up, which pairs naturally with mobile-first CSS. max-width applies styles up to a given width, which pairs with desktop-first. Choosing one direction per project keeps your media queries predictable and prevents the mental overhead of reading queries that point in opposite directions.
min-width: 768px applies at 768px and wider
max-width: 767px applies at 767px and narrower
min-width reads as 'add this as the screen grows'
max-width reads as 'keep this until the screen shrinks past here'
Avoid the off-by-one overlap bug
If you write min-width: 768px and max-width: 768px in different rules, both match at exactly 768px and one will unexpectedly win. The classic fix is to offset the boundary - use max-width: 767.98px - or, better, commit to a single direction so ranges never overlap. Overlap bugs are subtle because they only appear at one exact width.
Never use the same value for both min-width and max-width
Offset max-width by 0.02px if you must pair the two
Prefer a single direction to eliminate boundaries entirely
Test the exact threshold width, where overlap bugs hide
Catch boundary bugs with side-by-side widths
Boundary bugs are nearly invisible when you test one width at a time. Viewing several widths at once - including ones right at your thresholds - makes them obvious. Sizzy keeps multiple viewports in sync so you can land precisely on a breakpoint and 1px on either side without fiddling with window edges.
Add a device at the exact breakpoint width
Add devices 1-2px on each side of the threshold
Watch for a flash of double-applied or missing styles
Confirm only one rule wins at the boundary
Release checklist
Pick one query direction and use it consistently.
Never reuse the same value for min-width and max-width.
Offset paired boundaries by 0.02px when unavoidable.
Test the exact threshold and 1px on each side.
Frequently asked questions
Should I use min-width or max-width media queries?
Use min-width with a mobile-first base, since it reads as progressively adding styles as the screen grows. Choose max-width only for desktop-first projects. The important thing is to commit to one direction per codebase.
Why do my media queries both apply at one width?
If a min-width and max-width rule share the same pixel value, both match at that exact width and create an overlap bug. Offset one boundary by 0.02px, or restructure to use a single query direction so ranges never overlap.
What does max-width: 767.98px mean?
It is a common trick to stop a max-width rule just before a 768px min-width rule begins, avoiding the overlap where both would otherwise match at exactly 768px. Frameworks like Bootstrap use this pattern.
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.