Quick answer

Step 1: Add the viewport meta tag

Without this one line, phones pretend to be a desktop screen about 980 pixels wide and shrink the whole page down, so text is tiny and visitors have to pinch and zoom. Put it in the <head> of every page:

It tells the browser to use the device’s real width, so your CSS (and media queries) work with the actual screen size. Don’t add maximum-scale=1 or user-scalable=no: blocking zoom makes the page harder to read for people with low vision.

Step 2: Use flexible widths, not fixed pixels

A box with width: 1000px can never fit on a 390-pixel phone. Let content flex instead:

• Containers: max-width: 1100px; margin: 0 auto; keeps a comfortable reading width on big screens, but shrinks on small ones. Add side padding so text doesn’t touch the screen edges.
• Widths in percent (or fr units in grid) instead of pixels for columns.
• Images and videos: max-width: 100%; height: auto; lets them shrink but never stretch beyond their real size.
• box-sizing: border-box on everything, so padding and borders are included in an element’s width and don’t make it overflow.

Step 3: Build layouts that wrap with flexbox

Flexbox places items in a row; add flex-wrap: wrap and give the items a minimum size, and they move onto new rows when there isn’t enough room, with no media query needed. flex: 1 1 220px means “start at 220px, grow to fill space, shrink if needed”.

In the small preview the cards stack in one column. Click Open in Full Editor and switch between its Desktop, Tablet and Mobile buttons to watch them rearrange.

Step 4: Responsive columns with CSS grid

For a grid of equal columns (products, photos, features), one line of CSS grid does it all: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));. The browser fits as many columns of at least 200px as there’s room for and stretches them to fill the row, so you get four columns on a laptop, two on a tablet and one on a phone.

To stop very narrow phones (under 200px of space) from overflowing, write the minimum as minmax(min(200px, 100%), 1fr).

Step 5: Change the layout with media queries

Sometimes the layout itself should change, for example a sidebar that sits beside the content on a laptop but goes below it on a phone. A media query applies CSS only when a condition is true:

1. Write the mobile layout first, with no media query: everything stacked in one column. This is called mobile-first and keeps phone CSS simple.
2. Add a media query for bigger screens: @media (min-width: 768px) { … }. Inside it, switch to the side-by-side layout.
3. Choose breakpoints where your content starts to look wrong, not for specific devices. Common starting points are 600px, 768px and 1024px.

The preview pane here is narrower than 600px, so you’ll see the phone layout. Open it in the full editor and choose Desktop to see the sidebar move beside the content.

Each preview on this page is its own small “screen”, so media queries inside it respond to the preview’s width. On a real site, they respond to the browser window.

Step 6: Responsive text and images

• Text size: use rem units (relative to the visitor’s default text size) and keep body text at least 16px. For headings that scale with the screen, clamp() sets a minimum, a preferred and a maximum size in one line: h1 { font-size: clamp(1.75rem, 5vw, 3rem); }.
• Line length: max-width: 65ch on paragraphs keeps lines readable on wide screens.
• Images: besides max-width: 100%, use srcset to let phones download smaller files (see how to add an image).
• Tables: wrap wide tables in a box with overflow-x: auto (see how to make a table).
• Navigation: collapse the menu behind a button on small screens (see how to make a navigation bar).

How to test a responsive website

1. Resize the browser window slowly from wide to narrow and watch for overlapping text, cut-off content or a horizontal scrollbar.
2. Use device mode in DevTools: in Chrome or Edge, press F12, then the phone/tablet icon (Ctrl+Shift+M / Cmd+Shift+M) to preview common phone and tablet sizes.
3. Check the narrowest common width, 320px. If anything sticks out sideways, find it with DevTools and give it max-width: 100% or let it wrap.
4. Test on a real phone: touch targets, font sizes and scrolling feel different on a real device.
5. The editor on this site has Desktop / Tablet / Mobile preview buttons for a quick check while you code.

Responsive techniques at a glance

Common responsive design mistakes

• Forgetting the viewport meta tag. Media queries then seem to “not work” on phones.
• Fixed widths. width: 800px on a container or image causes sideways scrolling. Use max-width.
• Long words and URLs. They can’t wrap and push the page wider. Add overflow-wrap: anywhere to the container.
• Hiding content on mobile. Phone visitors deserve the same information; rearrange it instead of hiding it.
• Tiny tap targets. Buttons and links should be at least about 44 × 44 pixels on touch screens.
• Testing only on your own screen. Check narrow widths and a real phone before publishing.

Related HTML tags

Frequently asked questions