Test CSS Media Queries at Different Screen Sizes
Test CSS media queries in HCODX with a responsive layout example. Resize the preview, find overflow and check exactly when each breakpoint applies.
Test which CSS media query applies at each width
The goal is to keep content readable and controls usable across the widths people actually encounter.
Start with narrow content that works in one column, then add layout complexity only when there is room. This is the mobile-first approach: base rules describe the smallest useful layout, and min-width media queries enhance it. HCODX’s responsive tester lets you inspect the transitions without repeatedly resizing the entire browser window.
The question is not “Does this match a famous phone preset?” but “At what width does this specific content stop fitting?” Long button labels, a three-item navigation bar, an image beside copy and a code sample all have different pressure points. The breakpoint should respond to the component that breaks.
Scrub the difficult middle
Move through widths between common presets, where two-column sections and navigation bars often fail first.
Prefer fluid rules where possible
Use max-width, minmax(), flex-wrap and clamp() before adding several narrowly spaced media queries.
Check interaction states
A menu may fit closed but overflow open; a form may fit empty but break when validation text appears.
Choose a breakpoint from the card’s minimum useful width
This three-step example avoids guessing a phone or tablet model.
A mobile-first card grid
.cards {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 2vw, 1.5rem);
}
.card { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}The minmax(0, 1fr) tracks let grid items shrink, while min-width: 0 stops a long child from forcing a column wider than the container. These details often fix overflow that another breakpoint would merely hide.
Keep a wide table readable without shrinking every cell
Some content has a real minimum width. A responsive design can give that component its own scroll area instead of crushing it into unreadable columns.
A comparison table with several meaningful columns may not fit at 320 CSS pixels. Reducing text to tiny type or hiding arbitrary columns can remove the information users came for. Wrap the table in a region that scrolls horizontally, keep the table’s semantics and make the region keyboard-focusable.
Test the table at widths just above and below the point where scrolling begins. Also check that the rest of the page does not scroll sideways; the overflow should belong to this component, not to the document body.
<div class="table-scroll" role="region" aria-label="Plan comparison" tabindex="0">
<table>
<caption>Plan comparison</caption>
<thead><tr><th>Plan</th><th>Storage</th><th>Export</th></tr></thead>
<tbody><tr><th>Starter</th><td>Local</td><td>ZIP</td></tr></tbody>
</table>
</div>
<style>
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { min-width: 34rem; border-collapse: collapse; }
</style>Four failures to catch while resizing
A responsive pass needs more than a glance at the hero.
Horizontal scroll
Check code blocks, wide tables, fixed-width images and long unbroken strings. A single child can overflow while the rest of the page appears responsive.
Cramped controls
Inspect buttons and form fields at widths just before a breakpoint. Labels should remain understandable and focus targets should not overlap.
Awkward reading measure
On wide screens, cap paragraph width instead of letting lines span the entire viewport. On narrow screens, avoid aggressive side padding that leaves too little text area.
Unexpected order
When columns stack, check whether source order still tells a sensible story for keyboard and screen-reader users. CSS order alone should not disguise a confusing DOM order.
Responsive HTML questions
Find the width where your layout actually needs help
Use the responsive tester to move through widths and make a content-led CSS change.
Instant HTML Runner & Viewer with Live Preview
Need to run a short HTML, CSS and JavaScript snippet? The HTML Runner Online has a focused editing surface with live output.
Open HTML Runner Online