Responsive design

What you'll learn

How to use media queries, flexible widths and the viewport meta tag so one page works on every screen size.

Why it matters

More than half of web traffic is on phones. A page that only works on a big monitor loses most of its visitors.

Explanation

Responsive design means a page adjusts itself to the space available.

Three ingredients:

1. The viewport meta tag, <meta name="viewport" content="width=device-width, initial-scale=1">, so phones do not zoom out.
2. Flexible sizing: use percentages, fr, max-width and rem rather than fixed pixel widths. img { max-width: 100%; } stops images overflowing.
3. Media queries: CSS that only applies in certain conditions, such as a narrow screen.

This says: "when the window is 500px wide or narrower, use a single column."

A popular approach is mobile first: write the small-screen styles first, then add min-width queries to enhance for larger screens.

Example

Step-by-step walkthrough

1. By default the grid has three columns and the cards are blue.
2. The @media (max-width: 600px) block applies only when the viewport is 600px wide or less.
3. In that case the grid becomes a single column and the cards turn yellow.
4. The base styles still apply unless the media query overrides them.
5. In the preview, the width is small, so you should see the stacked yellow layout.

Try it yourself

Change the breakpoint from 600px to 200px and see the layout switch back to three columns.

Media queryHTML / CSS

Editable code<style> .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .card { background: #e0e7ff; padding: 16px; border-radius: 8px; text-align: center; } @media (max-width: 600px) { .cards { grid-template-columns: 1fr; } .card { background: #fde68a; } } </style> <div class="cards"> <div class="card">One</div> <div class="card">Two</div> <div class="card">Three</div> </div>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Missing viewport meta tag, so phones render the page as a tiny desktop.
• Fixed pixel widths wider than a phone screen.
• Hiding important content on mobile instead of reorganising it.
• Too many breakpoints. Pick a few based on where your design breaks.

Quick quiz

Summary

• Add the viewport meta tag and use flexible units.
• Media queries apply styles at certain widths.
• Design mobile first, then enhance.

Next: smooth changes with transitions.

@media (max-width: 500px) {
  .grid { grid-template-columns: 1fr; }
}

<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .card {
    background: #e0e7ff;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
  }
  @media (max-width: 600px) {
    .cards {
      grid-template-columns: 1fr;
    }
    .card {
      background: #fde68a;
    }
  }
</style>

<div class="cards">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>