How to Debug Media Queries Faster
A systematic workflow for finding and fixing media query bugs - from locating the breaking width to verifying the fix on every breakpoint.
7 min read - Updated 2026-06-12
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Find the exact breaking width first
Most media query debugging time is wasted before the real work starts - hunting for where the layout actually breaks. Don't drag the window edge and squint. Binary-search the width: if it breaks at 800px but not 1000px, check 900px, and continue until you have the exact pixel. With side-by-side devices at fixed widths, the breaking range is visible immediately.
Binary-search widths instead of continuous resizing
Pin devices at suspected breakpoints and compare directly
Check 1px above and below every @media threshold
Watch for unit mismatches: em-based queries shift with user font size
Diagnose why the query misbehaves
Once you have the width, the usual suspects are ordering and specificity. Later rules of equal specificity win, so overlapping queries (max-width: 768px alongside min-width: 600px) create zones where both apply and source order silently decides. Inspect the element at the breaking width and read which rules are active versus crossed out.
Check for overlapping min/max ranges applying simultaneously
Verify the viewport meta tag - without it, mobile queries lie
Look for hardcoded widths fighting the responsive rules
Confirm the query targets the right feature: width vs height vs orientation
Verify the fix everywhere at once
The classic failure: fixing the 768px bug creates a 1024px bug, and you don't find out until QA. This is the strongest argument for multi-device verification - with every breakpoint visible side by side and hot reload syncing all of them, a regression introduced by your fix is visible the second you save the file.
Keep all major breakpoints visible while editing CSS
Re-run interactive states (nav, forms, modals) after the fix
Test the boundaries of every range you touched
Screenshot the fixed state for the PR as evidence
Release checklist
Locate the exact breaking width before touching code.
Read active vs overridden rules at that width in the inspector.
Fix once, then verify every breakpoint simultaneously.
Attach before/after screenshots to the pull request.
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.