OnlineCBT
Change layout when the content needs it
A media query conditionally applies styles according to features such as viewport width, motion preference or print output. Breakpoints should respond to actual layout pressure rather than pretending every phone or laptop has one fixed size.
.layout { display: grid; gap: 1rem; }
@media (min-width: 48rem) {
.layout { grid-template-columns: 14rem minmax(0, 1fr); }
}
@media print {
.site-navigation, .print-button { display: none; }
.tech-lesson-content { color: black; background: white; }
}The base layout is one column. At sufficient width it becomes sidebar plus content. The print rule hides navigation controls, not the article's main information.
Viewport setup
Responsive pages normally include in the head. Do not disable user zoom. Width queries refer to the viewport, not a particular card's allocated width; container queries address a different use case.
Queries do not add selector specificity
A matching media query makes its contained rules eligible. It does not automatically make a weak selector stronger than every rule outside it. Cascade order and specificity still matter. Keep base rules and progressive overrides easy to trace.
Test around the boundary
If the breakpoint is 48rem, test just below, at and above it, plus intermediate widths and 200% zoom. A design that works only at a few preset screenshots is not reliably responsive. Long translations and large text can reveal problems before the nominal device width does.
Practice
- Start with one column and add a second only when both regions remain usable.
- Inspect print preview and confirm important instructions remain.
- Remove a fixed-width child that causes overflow rather than hiding horizontal scrolling globally.
- Use prefers-reduced-motion as a feature query and compare it with a width breakpoint.
