Content updated
By the end, you can…
- Start with a layout that fits a narrow screen. Add wider-screen changes only when the content has room.
- Explain the example, change one value, and check the result in your own page.
One idea at a time
Responsive design adapts one document to the available space. Keep the viewport meta setting from the HTML lessons so mobile browsers use the device width appropriately. That setting does not fix a rigid layout by itself. The actual boxes, images, and text must be allowed to fit and grow. Keep browser zoom available; users may need larger text.
A percentage width depends on its containing block, while viewport units depend on the viewport. rem follows the root font size; em depends on the property's context, commonly the element's font size. Fixed pixels are not always wrong, but a fixed wide page will not fit a narrow phone. The viewport is the browser’s page-viewing area. A breakpoint is the width at which a conditional layout change starts. Choose a breakpoint when the content needs it rather than guessing a particular device model.
What to remember first
Start with a layout that fits a narrow screen. Add wider-screen changes only when the content has room.
Read the CSS before trying it
width: 100% / max-widthFlexible with a limit- Fill the available parent width, but stop at a comfortable maximum.
margin-inline: autoCenter spare horizontal space- For this horizontal writing mode, equal automatic side margins center the limited-width block.
@media (min-width: 36rem) { ... }A conditional rule- The outer braces contain complete selector rules with their own braces. Apply them when the viewport is at least 36rem wide. In media conditions rem uses the browser’s initial font size: with 16px, this threshold is 576px. The base rules still apply.
max-width: 100%; height: autoFit an image- Limit an image to its parent's width and preserve its natural aspect ratio.
clamp()Bound a flexible value- 1vw is 1% of the viewport width. clamp(1.5rem, 4vw, 2.5rem) chooses a flexible heading size between a minimum and maximum. Check zoom as well as window size.
Walk through an example
<div class="panel">
<h1>My learning plan</h1>
<div class="layout">
<div class="item">Read</div>
<div class="item">Try</div>
<div class="item">Review</div>
</div>
<p>Make room for reading, trying, and reviewing.</p>
</div>* {
box-sizing: border-box;
}
.panel {
width: 100%;
max-width: 40rem;
margin-inline: auto;
padding: 16px;
background-color: #eff6ff;
}
.layout {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.item {
padding: 12px;
background-color: #dbeafe;
}
@media (min-width: 36rem) {
.layout {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panel {
padding: 24px;
}
}The base grid has one column and modest padding. At 36rem and wider, the media query changes the grid to three columns and adds padding. The panel remains flexible and stops at 40rem; automatic inline margins center it when there is spare room. The preview choices change the embedded viewport width so the same CSS can match different conditions.
See it happen: try a small change
Compare 320px and 680px viewports using the same CSS. On a small screen, scroll inside the wide preview to inspect its three columns.
Code to notice
* {
box-sizing: border-box;
}
.panel {
width: 100%;
max-width: 40rem;
margin-inline: auto;
padding: 16px;
background-color: #eff6ff;
}
.layout {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.item {
padding: 12px;
background-color: #dbeafe;
}
@media (min-width: 36rem) {
.layout {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panel {
padding: 24px;
}
}Live result
What changed: One column fits a narrow viewport. Padding and border-box keep the panel within its parent.
Look a little closer
The preview gives the embedded page an explicit width so you can compare the same CSS at 320px and 680px. On a narrow phone, the wide preview scrolls horizontally inside its browser frame; the lesson page itself should still fit. That scrolling belongs to the demonstration of a larger viewport, not to your final responsive page.
Test long headings, an extra card, and browser zoom. No fixed height should cut off a paragraph. Use img { max-width: 100%; height: auto; } for a local image. Hiding horizontal overflow can conceal inaccessible content; inspect the oversized element instead. Keep font size readable and let the layout stack before making the words smaller.
Try it in your own project
Keep the HTML viewport setting and copy the panel and grid. Resize your browser across the breakpoint, observing one column become three. If exact widths are useful, open Inspect and its responsive/device toolbar. The embedded 320px and 680px choices provide the same comparison without needing that tool.
The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.
A common wrong turn
A rule using width: 100vw inside a padded parent can be wider than the available content area. A percentage based on that parent is often the intended measure. Do not rely on hiding overflow or disabling zoom to make a page appear to fit.
Your turn: make a page fit small and large screens
Make a learning plan with one column on narrow screens and three columns when there is enough space. Keep a sensible maximum reading width.
Try this task in your own index.html and styles.css files. Save both files and refresh your browser to see changes. Continue below follows the course order, including its practice checkpoint.
Related practice in the course path
This practice appears in CSS Grid, step 3. Follow Continue below to reach it after its prerequisites.
For related guided practice, Build a responsive card grid gives you starter code, a live preview, hints, and checks. The task above is a separate variation to try in your own project.
- Keep the viewport meta setting and a flexible base layout in your local project.
- Add the wider-screen media query, changing only the column count and spacing.
- Compare the supplied 320px and 680px previews, then resize and zoom your own page. Add a longer heading and confirm that it remains readable. If you already have an image, optionally add the supplied responsive image rule and check its proportions.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.