Responsive Web Design Basics and Mobile-First CSS

Responsive web design means your website adapts to every screen, from phones to big monitors. Learn the viewport meta tag, fluid layouts, flexible images and mobile-first CSS.

What is responsive web design?

People visit websites on phones, tablets, laptops and huge TVs. Responsive web design means building one website that adapts its layout to any screen size, instead of building a separate "mobile site". Think of water: pour it into a glass, a cup or a bottle, and it takes the shape of each one.

Responsive design rests on four ideas:

1. The viewport meta tag, so phones show your page at the right size.
2. Fluid layouts that use flexible sizes instead of fixed pixel widths.
3. Flexible images that never get wider than their container.
4. Media queries, to change the layout at certain screen sizes (the next lesson).

Why you need the viewport meta tag

Phones have a trick from the early days of the mobile web. When a page has no viewport tag, the phone pretends its screen is about 980 pixels wide, draws the page at that size, then shrinks everything to fit. The text becomes tiny, and your media queries don't work as expected.

The viewport is the visible area of the page in the browser. This one line in the <head> tells the phone to use its real width:

<!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>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, every screen!</h1>
</body>
</html>

width=device-width makes the page as wide as the device's screen, and initial-scale=1 starts at normal zoom, with no zooming in or out.

Common mistake: Adding maximum-scale=1 or user-scalable=no to stop users from zooming. This is bad for accessibility, because people with low vision need to zoom. Keep the viewport tag exactly as shown above.

Fluid layouts and flexible images

A fluid layout uses sizes that can stretch and shrink, like percentages, fr, flex and viewport units, instead of fixed pixel widths. The most useful pattern combines width and max-width:

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

The .container takes the full width on small screens, but never gets wider than 1100 pixels on big screens, where it is centered by margin-inline: auto. The 16px padding stops text from touching the screen edges on phones.

The image rule is one every website should have. max-width: 100% means an image can be smaller than its container, but never bigger, so a large photo never breaks your layout on a phone. height: auto keeps its proportions.

The heading uses clamp(min, preferred, max): its size grows with the screen width (4vw means 4% of the viewport width), but it never gets smaller than 1.75rem or bigger than 3rem. This is called fluid typography.

Tip: Use rem for font sizes, not px. If a user sets a bigger default font size in their browser, rem sizes respect that choice.

What is mobile-first CSS?

Mobile-first means you write your basic CSS for small screens first, then add styles for bigger screens on top. It is like packing for a trip: start with the things you really need, then add extras if there is room.

Why mobile-first?

• Small screens usually need simpler layouts: everything stacks in one column, which is mostly the normal flow. So your base CSS is short.
• Phones load less CSS that they don't need.
• It forces you to focus on the most important content first.

Here is a product section written mobile-first:

<section class="product">
  <img src="https://picsum.photos/id/26/800/600" alt="Leather backpack">
  <div class="product-info">
    <h2>City Backpack</h2>
    <p>A light, water-resistant backpack with room for a 15-inch laptop.</p>
    <button>Add to cart – $79</button>
  </div>
</section>

/* Base styles: phones first */
.product {
  display: grid;
  gap: 16px;
  padding: 16px;
  font-family: system-ui, sans-serif;
}

.product img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.product button {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
}

/* Bigger screens: add a second column */
@media (width >= 768px) {
  .product {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
  }

  .product button {
    width: auto;
  }
}

On a phone, the image sits on top, the text below it, and the button stretches across the full width so it's easy to tap. On a screen 768 pixels or wider, the image and text sit side by side in two equal columns, and the button returns to its normal size. The @media rule only adds changes; it never undoes a complicated desktop layout.

Note: You can test responsive pages in your browser without a phone. Open developer tools and click the "device toolbar" icon (it looks like a phone and tablet). You can then pick a device or drag the screen width.

Practice exercise

Take any simple page you have built before. Add the viewport meta tag, wrap the content in a .container with a max-width and side padding, and add the img { max-width: 100%; height: auto; } rule. Then test it at 375px, 768px and 1280px wide in the device toolbar.

Hint: look for anything that causes a sideways scrollbar on the small size. Fixed width values in pixels are usually the cause; try changing them to max-width.

Key takeaways

• Responsive web design makes one site adapt to every screen size.
• Always add <meta name="viewport" content="width=device-width, initial-scale=1">.
• Use width: 100% with max-width for fluid containers, and max-width: 100% for images.
• clamp() creates font sizes that grow with the screen but stay within limits.
• Mobile-first means base styles for phones, then min-width media queries for bigger screens.