BeingXpert Learn & Build Future

28. CSS Responsive Design

What you will learn

  • What responsive design means
  • Why the viewport meta tag is essential
  • How to write media queries
  • The mobile-first approach
  • How to make images and layouts flexible

What is responsive design?

Responsive design means one website that adapts to every screen: phones, tablets, laptops, and large monitors. It rests on three ideas: flexible layouts, flexible images, and media queries that change styles at certain screen sizes.

Step 1: The viewport meta tag

Without this line in the <head>, phones pretend to be a wide desktop screen and shrink your page to fit.

HTML

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

You met this tag in the HTML Basic Structure lesson. Every page needs it.

Step 2: Flexible images and layouts

  • img { max-width: 100%; height: auto; } keeps images inside their containers.
  • Use %, rem, and max-width rather than fixed pixel widths.
  • Flexbox with flex-wrap and Grid with auto-fit adapt on their own.

Step 3: Media queries

A media query applies CSS only when a condition is true, such as the window being at least 600px wide.

Syntax

@media (min-width: 600px) {
  /* styles for screens 600px wide and up */
}

Mobile first

Write the styles for small screens first, with no media query. Then add min-width queries that improve the layout as space grows. This keeps phone styles simple and loads the least CSS for the smallest devices.

Example

<style>
  .columns { display: grid; gap: 10px; }
  .columns div {
    background-color: #0d6efd;
    color: white;
    padding: 20px;
    text-align: center;
  }

  /* Tablet and up */
  @media (min-width: 600px) {
    .columns { grid-template-columns: 1fr 1fr; }
  }

  /* Desktop and up */
  @media (min-width: 900px) {
    .columns { grid-template-columns: repeat(4, 1fr); }
  }
</style>

<div class="columns">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

Output (narrow your browser window in the live editor to see it change)

1
2
3
4

One column on a phone, two on a tablet, four on a desktop.

Common breakpoints

Name Typical width
Small phone Default styles, under 600px
Tablet 600px and up
Laptop 900px to 1024px and up
Large desktop 1200px and up

These are only guides. A better rule is to widen your browser until the design starts to look wrong, and put the breakpoint there. Do not target specific devices.

Other useful conditions

  • (max-width: 599px): screens narrower than 600px.
  • (orientation: landscape): wider than tall.
  • (prefers-color-scheme: dark): the visitor uses dark mode.
  • (prefers-reduced-motion: reduce): the visitor wants less motion.
  • (hover: hover): the main input can hover, which touch screens usually cannot.

A responsive menu pattern

Example

<style>
  .menu { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; }
  .menu a {
    display: block;
    padding: 12px;
    background-color: #082b59;
    color: white;
    text-decoration: none;
  }

  @media (min-width: 600px) {
    .menu { flex-direction: row; }
    .menu a { padding: 12px 20px; }
  }
</style>

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Tutorials</a></li>
  <li><a href="#">Contact</a></li>
</ul>

On a phone the links stack vertically with large tap targets. From 600px up they sit in a row.

Testing your design

  1. Press F12 to open developer tools.
  2. Click the device toolbar icon (a phone and tablet) to simulate screen sizes.
  3. Drag the window edge to find where the layout breaks.
  4. Whenever you can, test on a real phone as well.

Make tap targets at least about 44 by 44 pixels, keep body text at 16px or more, and never disable zooming in the viewport tag. These help everyone, especially people with low vision or large fingers.

Common mistakes

  • Leaving out the viewport meta tag.
  • Fixed pixel widths that force sideways scrolling.
  • Writing desktop styles first, then fighting to undo them with max-width queries.
  • Tiny buttons and links that are hard to tap.
  • Hiding important content on mobile instead of redesigning it.

Exercise

Add a media query so that on screens at least 700px wide, .box gets a #0d6efd background, white text, and a font size of 1.5rem.

Show solution 
<style>
  .box {
    padding: 16px;
    background-color: #eaf5ff;
    font-size: 1rem;
  }
  @media (min-width: 700px) {
    .box {
      background-color: #0d6efd;
      color: white;
      font-size: 1.5rem;
    }
  }
</style>
<div class="box">Resize the window and watch me.</div>

Knowledge check

1. Which tag makes pages scale properly on phones?

The viewport meta tag.

2. What does “mobile first” mean?

Write the small-screen styles first, then add min-width media queries for larger screens.

3. How should you choose a breakpoint?

Where the design starts to break, rather than for specific devices.

Summary

  • Responsive design uses the viewport tag, flexible layouts, flexible images, and media queries.
  • Start with small screens and add min-width queries.
  • Test with developer tools and real devices.
Scroll to Top