A media query conditionally applies CSS according to the rendering environment. Width queries commonly adjust layout; preference queries respond to user settings.
Make this comfortable
CSS media queries: change layout at a content failure point
How the rule works
A two-column review screen stops fitting once the record panel and action rail together exceed the available width. Begin with the compact one-column arrangement, then add the second track only when there is enough room. Keeping the narrow layout as the base means unsupported media queries still leave a usable reading flow. The chosen breakpoint should be measured with real labels, large text, and translated values. Do not infer the user's input method from viewport width; a narrow desktop window still has a keyboard and a wide tablet may still use touch.
.review-screen { display: grid; gap: 1rem; }
@media (min-width: 56rem) {
.review-screen { grid-template-columns: minmax(0, 1fr) 17rem; }
}Cost and verification
A width query adds negligible runtime work compared with the layout it selects. More breakpoints can increase testing and maintenance, so use the fewest that reflect actual content changes. Check both sides of the threshold, not just one phone and one monitor. CSS cannot change DOM reading order; keep the record before the rail in markup if that is the intended reading sequence.
Common Mistakes
- Do not treat 56rem as a named device category.
- Do not use viewport width to decide whether a user has a mouse.
- Do not repair a wrong source order with visual reordering.
Connected lessons
- Responsive CSS
- Responsive CSS: keep reading order and controls usable
- CSS container queries: adapt a component to its own space
- CSS grid tracks: reserve a sidebar without letting content widen the page
Extend this decision
- CSS viewport units and safe areas: size panels around real browser chrome
- CSS pointer and hover queries: keep touch targets usable
Related native states
css
responsive
web