What does 'mobile first' mean?

It means you write your base CSS for small screens first, then use media queries to add or change styles for larger screens. Because most visitors are on phones, designing for them first keeps the core experience simple and fast.

Do I need a framework like Bootstrap to be responsive?

No. Plain CSS with the viewport tag, relative units, flexbox and media queries is enough to build fully responsive pages. Frameworks just bundle these techniques into ready-made classes.

Responsive Web Design Basics | Coding

What is responsive design?

Look at any good website on your phone, then on a laptop. The same site rearranges itself: columns stack into a single column on a narrow screen, text stays readable, and nothing overflows off the edge. That is responsive web design — building one site that adapts to whatever screen it's viewed on.

It matters because people visit sites on tiny phones, big monitors and everything in between. A page that's only designed for a desktop becomes a frustrating, zoomed-out mess on a phone. In this lesson you'll learn the four core tools of responsiveness: the viewport tag, relative units, flexbox, and media queries. This builds directly on Styling Web Pages with CSS.

Step 1: The viewport meta tag

Before any CSS, mobile browsers need one line in your HTML's <head>. Without it, phones pretend to be a wide desktop and shrink the whole page, making everything microscopic.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Responsive Page</title>
</head>
<body>
  <h1>Hello, responsive world!</h1>
</body>
</html>

The key line is:

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

width=device-width says "use the device's actual width" (a phone is treated as ~400px wide, not 1000px).
initial-scale=1 sets the starting zoom to 100%.

This single tag is the foundation. Every responsive page needs it.

Step 2: Avoid fixed widths

A common beginner mistake is setting a fixed pixel width:

.card {
  width: 600px;   /* ❌ too wide for a phone */
}

On a 400px-wide phone, this 600px box spills off the screen and forces horizontal scrolling. Instead, use relative units that adapt:

.card {
  width: 100%;        /* fill the available space */
  max-width: 600px;   /* but never grow beyond 600px */
  margin: 0 auto;     /* center it on wide screens */
}

Now the card is at most 600px wide on a big screen, but shrinks to fit narrow ones. Useful relative units:

Unit	Meaning
`%`	percentage of the parent's size
`rem`	a multiple of the root font size (great for spacing and text)
`vw` / `vh`	percentage of the viewport width / height
`max-width`	an upper limit so things don't get too wide

Prefer these over fixed px for widths and layout sizes.

Step 3: Flexible layouts with flexbox

To place items side by side and have them rearrange automatically, use flexbox. You turn a container into a flex container, and its children become flexible items.

.row {
  display: flex;
  flex-wrap: wrap;   /* this is the magic for responsiveness */
  gap: 16px;
}

.row .box {
  flex: 1;            /* each box grows to share the space */
  min-width: 200px;   /* but won't get narrower than 200px */
  background: #e0f0ff;
  padding: 20px;
}

Here's why this is responsive:

display: flex lays the boxes out in a row.
flex: 1 makes each box grow to share the row equally.
min-width: 200px says a box should never be narrower than 200px.
flex-wrap: wrap lets boxes drop to the next line when there isn't room for them all.

On a wide screen you might fit four boxes across; on a phone they automatically stack into one or two columns. You didn't write separate layouts — flexbox figured it out.

Step 4: Media queries

Sometimes you want to change styles only at certain sizes — for example, hide a sidebar or shrink a heading on small screens. That's what a media query does. It wraps CSS rules that apply only when a condition is true.

/* base styles: apply to all screens */
body {
  font-size: 18px;
}

.menu {
  display: flex;
  gap: 20px;
}

/* on screens 600px wide or less: */
@media (max-width: 600px) {
  body {
    font-size: 16px;     /* slightly smaller text */
  }
  .menu {
    flex-direction: column;   /* stack menu items vertically */
  }
}

Reading the media query:

@media (max-width: 600px) { ... } means "apply these rules only when the screen is 600px wide or narrower."
Inside, we shrink the body text and stack the menu vertically.
On wider screens, the base rules (horizontal menu) stay in effect.

You can have several breakpoints — common ones are 600px (phones) and 900px (tablets) — each adjusting the layout for that range.

A complete worked example

Let's put all four tools together into one small responsive page. Save it as an .html file and open it in a browser, then drag the window narrower and wider to watch it adapt.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Cards</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 20px;
    }

    h1 {
      text-align: center;
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      max-width: 900px;
      margin: 0 auto;
    }

    .card {
      flex: 1;
      min-width: 220px;
      background: #f0f4ff;
      border-radius: 12px;
      padding: 24px;
    }

    @media (max-width: 500px) {
      h1 {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>
  <h1>My Hobbies</h1>
  <div class="cards">
    <div class="card">
      <h2>🎸 Music</h2>
      <p>I play guitar and write songs on weekends.</p>
    </div>
    <div class="card">
      <h2>⚽ Football</h2>
      <p>I'm a midfielder for my local team.</p>
    </div>
    <div class="card">
      <h2>💻 Coding</h2>
      <p>I'm building websites just like this one.</p>
    </div>
  </div>
</body>
</html>

What happens as you resize:

Wide screen: the three cards sit side by side, sharing the row evenly, capped at 900px total.
Medium screen: flex-wrap lets a card drop to a second row when there isn't room for all three at 220px each.
Phone: the cards stack into a single column, and the heading shrinks thanks to the media query.

All from one HTML file with no JavaScript and no framework.

Mobile-first thinking

A popular approach is mobile first: write your base CSS for small screens, then use @media (min-width: ...) queries to add layout for bigger screens. Because most visitors are on phones, this keeps the core experience simple and fast, and you only layer on complexity for larger displays.

Try it yourself

Two breakpoints: Add a second media query at max-width: 800px that changes the page background color, so you can clearly see when each breakpoint kicks in.
Responsive image: Add an <img> and give it style="max-width: 100%; height: auto;" so it shrinks to fit its container instead of overflowing.
Navigation bar: Build a top nav with flexbox that sits horizontally on wide screens and stacks vertically under max-width: 600px.

Challenge: rebuild the card layout "mobile first." Start with cards stacked in a single column as your base CSS, then add @media (min-width: 700px) { .cards { ... } } to switch them to a row only on larger screens. Compare the two approaches and decide which reads more clearly. When you're ready for more, revisit Build a Simple Web Page with HTML and make it fully responsive using everything here.

Responsive Web Design Basics

Key takeaways