HTML/CSS - 15

HTML/CSS - 15: Responsive Design (Mobile-First)

People visit websites on screens of many different sizes. A layout that looks great on a desktop computer may feel cramped or awkward on a phone.

Responsive design means creating a page that can adapt to the space available. One common approach is called mobile-first design: start with a simple layout that works on small screens, then add extra layout rules for larger screens.

CSS @media rules let you apply styles only when the screen reaches a certain width.

Your challenge: Create a card layout that shows one column on small screens, two columns on medium screens, and three columns on larger screens.

✦ HTML Editor

▶ Live Output

What should you notice?

The basic .cards rule creates the layout for small screens first. Because it uses grid-template-columns: 1fr;, the cards appear in one vertical column.

Then the media queries change the layout only when more screen space becomes available.

At 600px or wider, this rule can create two columns: @media (min-width: 600px).

At 900px or wider, another media query can change the grid to three columns.

Why is this called mobile-first? The normal CSS handles the smallest layout first. The media queries then add changes for progressively larger screens instead of designing the desktop version first and trying to squeeze it onto a phone.

About the viewport tag: The line <meta name="viewport" content="width=device-width, initial-scale=1.0"> helps mobile browsers use the actual width of the device when displaying the page. It belongs inside the <head>.

Experiment: Change the first breakpoint from 600px to 500px. Then try 750px. Notice that you are changing the point where the layout switches from one column to two.

Try this: Change the larger breakpoint from 900px to 800px. The three-column layout will begin sooner.

Important: Breakpoints such as 600px and 900px are not magic numbers. They are simply points where you decide that the layout has enough room to change.

Good responsive design habit: Choose breakpoints based on when your content needs more space, rather than trying to create a different breakpoint for every possible phone or tablet model.

👀 Show Solution

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

  .cards {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .card {
    background-color: #111;
    border: 2px solid #8A8A8A;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
  }

  @media (min-width: 600px) {
    .cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    .cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }

</style>

<h1>Responsive Card Grid</h1>

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

The layout starts with one column. At 600px, the first media query changes it to two columns. At 900px, the second media query changes it to three.

This means the same HTML can adapt to different screen sizes without creating separate mobile and desktop pages.