Step 4: Make it responsive

On a phone, three columns are far too narrow. A media query applies rules only when a condition is true. Below 640px wide we switch the grid to one column, stack the navigation links and make the heading a little smaller.

Examplehtml

<style>
:root { --bg: #ffffff; --fg: #1f2330; --accent: #0b6b4a; --card: #f1f3f5; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; background: var(--bg); color: var(--fg); }
header { background: var(--accent); color: #fff; padding: 28px 20px; text-align: center; }
header h1 { margin: 0; font-size: 2rem; }
nav { margin-top: 12px; }
nav a { color: #fff; margin: 0 10px; font-weight: 600; }
main { max-width: 860px; margin: 0 auto; padding: 20px; }
h2 { border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 2px; }
footer { text-align: center; padding: 20px; color: #5b6270; }
#projects .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
article { background: var(--card); padding: 16px; border-radius: 10px; border-top: 4px solid var(--accent); }
article h3 { margin-top: 0; }
@media (max-width: 640px) {
  #projects .cards { grid-template-columns: 1fr; }
  nav { display: flex; flex-direction: column; gap: 6px; }
  nav a { margin: 0; }
  header h1 { font-size: 1.6rem; }
}
</style>
<header>
  <h1>Ada Lovelace</h1>
  <p>Front-end developer in London</p>
  <nav aria-label="Main">
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About me</h2>
    <p>I build fast, friendly websites and I love teaching others how the web works.</p>
  </section>
  <section id="projects">
    <h2>Projects</h2>
    <div class="cards">
    <article><h3>Weather app</h3><p>A small app that shows the forecast.</p></article>
    <article><h3>Recipe finder</h3><p>Search recipes by ingredient.</p></article>
    <article><h3>Quiz game</h3><p>Test your web knowledge.</p></article>
    </div>
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <p>Say hello: ada@example.com</p>
  </section>
</main>
<footer><small>&copy; 2026 Ada Lovelace</small></footer>

Open in editor »

To see it work, open this page in the Try it editor (the link under the example) and drag the result narrower, or use your browser's responsive mode. Real pages also need <meta name="viewport" content="width=device-width, initial-scale=1"> in the head so phones do not zoom out.

Quick check

What does @media (max-width: 640px) { ... } do?

Applies the rules only when the screen is 640px wide or lessLimits the page to 640pxLoads a smaller image

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.