A responsive page adapts to available space instead of assuming a particular phone or laptop. Begin with readable content and simple layout rules, then add complexity only when there is room.
Let content determine the layout
A fixed width can force horizontal scrolling when the viewport is narrower than the design. Use flexible widths, sensible maximum widths and gaps that preserve readability. Long URLs, code blocks and unbroken text can still overflow; test those cases as well as short demonstration content.
Use a small-screen starting point
A single column is often a reliable baseline. A media query can introduce additional columns when the content has enough space. The breakpoint should solve a layout problem you observe, rather than matching a favourite device name. Browser zoom and larger text settings are also useful tests.
Keep controls usable as the page changes
Do not hide essential instructions just to fit a screenshot. Let navigation wrap or offer an accessible alternative, keep labels close to inputs and allow buttons to grow with translated text. A visually balanced desktop grid is not a success if a narrow-screen user cannot finish the same task.
Worked example
The grid starts with one column and becomes two columns at a wider viewport. minmax(0, 1fr) allows grid tracks to shrink without a long child forcing an unexpectedly wide column. Scroll code within its own block rather than the whole document.
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.cards > * { min-width: 0; }
pre { overflow-x: auto; }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Check your understanding
Try each question before opening its explanation. These are free practice prompts; they do not use game chances.
Is a responsive design just a set of device widths?
No. It is a layout that responds to available space and content. A browser window, split-screen view, zoom level or translated label can create widths that do not match a named device.
Why can a flexible grid still overflow?
A child may have an intrinsic minimum width, an unbroken word or a fixed-width element. Inspect the actual overflowing element rather than adding overflow hidden to the whole page.
How would you test a card with a very long title?
Use a realistic long title, narrow the viewport and increase text size. Verify wrapping, focus visibility and button access; the card should grow vertically without clipping essential information.
Sources and further reading
These original examples explain foundational concepts. Use the official references for complete, current details and version-specific behaviour.
About this guide: AI-assisted educational content with original examples and linked primary references. Found an issue? Tell us what to improve.