Responsive Design
Make pages look good on every screen size.
Syntax
<meta name="viewport" content="width=device-width, initial-scale=1">Responsive design means a layout adapts to the size of the screen, from phones to desktops.
Core techniques
- Relative units like
%,rem, andvw. - Flexible layouts with Flexbox and Grid.
- Media queries to change styles at breakpoints.
- A viewport meta tag in the HTML head.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer adds the viewport meta tag and builds all layouts mobile-first so the site works without horizontal scrolling on phones.
- A designer specifies percentage-based widths and max-width constraints so content fills small screens without overflowing on large ones.
- A product manager requires the site to pass a Google Mobile-Friendly test, prompting the team to audit breakpoints and touch target sizes.
More examples
Viewport meta tag for mobile
The essential meta tag that tells mobile browsers to use the device width as the viewport rather than a zoomed-out desktop view.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Fluid container with max-width
Creates a container that fills narrow screens and centers itself with a max-width cap on wide screens.
.container {
width: 100%;
max-width: 1200px;
padding-inline: 16px;
margin-inline: auto;
}Mobile-first base styles
Writes small-screen styles first, then overrides them for wider viewports — the mobile-first responsive approach.
/* Mobile base */
.nav { flex-direction: column; }
.hero { font-size: 1.5rem; padding: 32px 16px; }
/* Desktop enhancement */
@media (min-width: 768px) {
.nav { flex-direction: row; }
.hero { font-size: 2.5rem; padding: 80px 24px; }
}
Discussion