Your layout looks fine on your laptop but breaks on a phone? Responsive web design fixes that by letting one layout reshape itself to each screen. Set the viewport, use flexible grids, and add breakpoints where your content needs them.
If you are new to the field, the web design basics guide gives you the wider picture before you work through layouts.
| Item | Value |
|---|---|
| Recommended viewport meta value | width=device-width, initial-scale=1 |
| Mobile browser render width without a viewport tag | about 980px |
| Image rule for fluid images | max-width: 100% |
| Example breakpoint in a mobile-first tutorial | min-width: 768px |
| Minimum card size in a grid demo | 200px |
These figures come from the web.dev responsive basics article and the W3Schools responsive design tutorial. Recommendations and browser behaviour can change, so check the sources before you rely on them.
What responsive web design actually is
Responsive web design is a design strategy that changes a site’s layout to suit the device being used. The web.dev basics article credits Ethan Marcotte with defining it in A List Apart.
A typical example is a single-column view on a phone, two columns on a tablet, and three or four columns on a desktop computer. The content stays the same, but its arrangement follows the space available.
The approach also accounts for how people interact, such as touch screens. Because there are so many screen sizes, your site needs to adapt to existing and future ones, not only to the devices on your desk.
In practice, a responsive page rests on three building blocks:
- A meta viewport tag that lets the page match the screen width.
- Flexible images and grids that shrink and grow with the available space.
- Media queries, and increasingly container queries, that change the layout where it needs to change.
The sections below follow that order. Menus are part of the same job, and the guide to website navigation design shows how navigation should behave once the layout gets narrow.
How do you set the viewport correctly?
Every responsive page starts with a meta viewport tag in the head of the document. Without it, mobile browsers render the page at a desktop width, usually about 980px, and then scale the content down, as the web.dev basics article explains. That makes fonts look inconsistent and forces people to zoom in.
The widely used value is width=device-width, initial-scale=1, which the W3Schools tutorial also lists. Place it in the head of every page template.
The two parts do different jobs:
- width=device-width tells the page to match the screen’s width in device-independent pixels, so content can reflow.
- initial-scale=1 sets a 1:1 relationship between CSS pixels and device-independent pixels, so the page can use the full landscape width after rotation.
The same source warns against the user-scalable, minimum-scale and maximum-scale attributes. They can prevent people from zooming, which potentially causes accessibility issues. Its Lighthouse audit for the viewport tag can automate the check.
Flexible images and grids
Forcing people to scroll horizontally or zoom out to see the whole page causes a poor experience. The most common culprit is an image wider than the screen. The web.dev basics article recommends giving every image a max-width of 100%, which shrinks it to fit without stretching it beyond its initial size.
It also recommends keeping the width and height attributes on your image tags. The browser can then reserve space before the image loads, which helps prevent layout shifts.
For layout, content should not rely on a particular viewport width. Percentages replaced fixed pixel columns in older float layouts, and modern CSS now offers flexbox, grid and multicol to build flexible grids with far less effort.
- Flexbox suits a set of items of different sizes that should fit in a row or wrap onto several rows, with smaller items taking less space.
- Grid uses the fr unit, which represents a portion of the available space in the container.
- Grid can also place as many items as fit on a row, so the number of columns drops as the screen narrows.
The web.dev grid demo shows cards that fill each row, with a minimum size of 200px per card. The W3Schools tutorial suggests the same idea with minmax() and auto-fit or auto-fill for automatic column counts.
Wide lines of text are a layout problem too. The W3Schools tutorial advises applying a max-width to prevent overly wide text blocks.
Breakpoints, mobile-first and fluid type
A breakpoint is the screen width where your layout needs to change. The W3Schools tutorial advises applying breakpoints based on design needs, not specific devices, and its example adds a second column at min-width: 768px.
That example is mobile-first. Mobile-first means you write styles for phones first, then add media queries for tablets and desktops.
A practical workflow looks like this:
- Add the viewport meta tag to the page head.
- Design the narrow, single-column version first.
- Use flexible grids and fluid images so the layout bends before it breaks.
- Widen the browser until the content looks stretched, then add a breakpoint at that width.
- Test on real devices and in browser tools, including touch interaction.
Type and spacing can flex as well. The same tutorial recommends relative units such as rem, vw and %, and notes that clamp() picks a value between a minimum and maximum, so text stays readable on every screen.
Container queries and user preferences
Viewport-based media queries give you some powerful tools, but lack a lot of finesse, according to the web.dev article on the new responsive. They cannot let a component style itself based on the space it sits in.
Container queries address that. If you put a card component in a sidebar, a hero section or a grid in the main body, the component itself owns its responsive information.
The W3Schools tutorial lists container queries as optional. It suggests using @container when component changes depend on parent width, and it says to still provide fallbacks for browsers without container query support.
The web.dev article also describes user preference media features. They pick up settings from the operating system, such as reduced motion or a light or dark theme, which helps people with accessibility needs.
- With prefers-reduced-motion, you offer a calmer baseline, for example a crossfade instead of a card flip.
- With prefers-color-scheme, you adapt the interface to the theme the person has chosen.
Dark themes also matter for battery life. The same article cites a 2018 Android study that showed power draw savings of up to 60% on AMOLED screens, depending on screen brightness and the interface. The web.dev piece adds that dark themes are not just inverted colours, and that you may need to desaturate colours to reduce visual vibration.
Picking those palettes is its own skill, and the guide to color theory for web design is a good companion when you build light and dark themes.
Frequently asked questions
Is the viewport meta tag enough to make a site responsive?
Show answer
No. The tag lets the page reflow content to match different screen sizes, but your CSS still has to provide flexible images, grids and breakpoints. Treat the tag as the starting point.
Should breakpoints match specific devices?
Show answer
No. Choose widths that fit your content, because a breakpoint is simply the width where your layout needs to change. Devices vary too much for a fixed list to stay useful.
Do you need container queries to build a responsive site?
Show answer
Not necessarily. The W3Schools tutorial treats them as optional and recommends fallbacks for browsers without support. Media queries, flexbox and grid cover the core of a responsive layout.
How do you avoid horizontal scrolling on phones?
Show answer
Make sure every image has a max-width of 100% and that no element is wider than the viewport. The Lighthouse audit for content that is not sized correctly for the viewport can help you find overflowing content.
