Responsive Web Design: How Your Website Looks Great on Every Device

This article is part 4, the final installment, of our four-part series on HTML and CSS fundamentals. If you’re not yet familiar with Flexbox and Grid, start with Part 3: Flexbox and Grid. The whole series begins with Part 1: HTML Basics.

Over 60 percent of global web traffic today comes from mobile devices. A website that only looks good on a large desktop monitor loses a huge share of its visitors as a result. Responsive web design solves exactly this problem: it makes your site automatically adapt to the screen size of whatever device it’s viewed on — from a small smartphone display to a large desktop monitor. This final part of the series covers the three most important tools for that: the viewport meta tag, media queries, and the mobile-first approach.

What Does “Responsive” Actually Mean?

A responsive website uses flexible layouts (as you learned with Flexbox and Grid in Part 3), relative units instead of fixed ones, and targeted adjustments at certain screen widths to stay readable and usable on every device. The opposite is a rigid, fixed-width layout that’s either tiny or only usable via horizontal scrolling on a smartphone — both a bad user experience and bad for your Google ranking, since Google now primarily evaluates the mobile version of a page (“mobile-first indexing”).

The Viewport Meta Tag: The Baseline Requirement

Without this one line in the <head>, responsive design doesn’t really work on mobile devices at all:

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

Without this tag, mobile browsers render a page at a virtual desktop width by default (often 980px) and then zoom it out to fit the screen — everything looks tiny, and CSS adjustments for narrow screens don’t kick in at all. width=device-width tells the browser: “use the actual device width as the reference,” and initial-scale=1.0 sets the initial zoom level to 100%.

Media Queries: CSS Rules Based on Screen Size

Media queries let you apply CSS rules only under certain conditions — most commonly, above or below a specific screen width.

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

This example shows three columns on wide screens but automatically switches to a single column once the viewport is 768px or narrower — a typical tablet/smartphone breakpoint. max-width means “up to this width,” while min-width means “from this width and up.”

Common Breakpoints as a Reference

There’s no official standard, but these values have become established in practice and cover the vast majority of devices well:

• Up to 480px — small smartphones
• 481px – 768px — larger smartphones and small tablets (portrait)
• 769px – 1024px — tablets (landscape), small laptops
• 1025px and up — desktop and large monitors

Important practical tip: don’t rigidly base breakpoints on specific devices (those keep changing) — base them on where YOUR specific layout actually starts to break visually. Open the browser, shrink the window, and see at what width it starts to look “broken.” That’s exactly where you set your breakpoint.

Mobile-First: The Recommended Approach

Instead of designing for desktop first and then “scaling down” with max-width media queries (desktop-first), mobile-first is today’s best practice: you write your base styles for the smallest screen and then expand the layout with min-width media queries for larger screens.

/* Base styles: apply to ALL screen sizes, written for mobile */
.card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* From tablet width up: two columns */
@media (min-width: 600px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* From desktop width up: three columns */
@media (min-width: 1024px) {
  .card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Why mobile-first makes more sense:

• It forces you to prioritize the most important content first — there’s no room for extra clutter on a small screen.
• The code is usually leaner, since you’re adding properties additively instead of overriding them later.
• It matches the reality that most users first access your site on mobile.

Relative Units Instead of Fixed Pixels

Besides media queries, choosing the right units of measurement also helps:

• % — relative to the parent element, e.g. width: 100%
• rem — relative to the document’s base font size (usually 16px), ideal for font sizes and spacing because it respects the user’s zoom/accessibility settings
• vw/vh — relative to viewport width/height (1vw = 1% of the window width)
• fr and auto-fit/minmax() in CSS Grid (see Part 3) — for layouts that adapt automatically, sometimes even WITHOUT additional media queries

Fixed px values aren’t fundamentally wrong (e.g. for border widths or small icons), but for layout widths and font sizes, relative units are usually the better choice.

Making Images Responsive

A common problem: a large image breaks the layout on small screens. The simplest fix:

img {
  max-width: 100%;
  height: auto;
}

This ensures an image never scales wider than its parent element while preserving its aspect ratio (height: auto), so it doesn’t get squished or distorted.

Testing Responsive Design

You don’t need to test on 10 different physical devices. Every modern browser comes with built-in tools for this:

• Chrome/Edge DevTools — press F12, then click the device icon (Toggle Device Toolbar) to simulate various screen sizes, including touch events.
• Firefox Responsive Design Mode — Ctrl+Shift+M, same functionality.
• Manually resizing the browser window — the fastest way to spot rough layout breaks live while you write CSS.

Series Wrap-Up

That completes the four-part series: you’ve learned how HTML provides the structure of a webpage, how CSS uses selectors and the box model to control appearance, how Flexbox and Grid enable complex layouts, and how to use media queries and mobile-first thinking to make that layout work on every device. With this foundation, you can build your own fully responsive websites from scratch.

The next logical step if you want to go deeper into web development: JavaScript for interactivity, or a look behind the scenes with our guide Getting Started as a Backend Developer: PHP vs. Node.js vs. MySQL.

Frequently Asked Questions About Responsive Web Design

What’s the difference between mobile-first and desktop-first?

With mobile-first, you write base styles for small screens and expand them with min-width media queries for larger screens. Desktop-first is the reverse: base styles for desktop, scaled down with max-width media queries for smaller screens. Mobile-first is considered today’s best practice.

How many breakpoints do I need at minimum?

For most projects, two to three breakpoints are plenty (e.g. mobile, tablet, desktop). Too many breakpoints make CSS unnecessarily complex — base them on how your actual specific layout behaves, not on a fixed list.

Why doesn’t my site work correctly on mobile even though I wrote media queries?

The most common cause is a missing or incorrect viewport meta tag in the <head>. Without <meta name="viewport" content="width=device-width, initial-scale=1.0">, media queries often don’t behave as expected on mobile devices.

Are rem and px interchangeable in CSS?

Not quite: px is an absolute unit, while rem is relative to the document’s base font size and therefore respects the user’s zoom/accessibility settings. For font sizes and much spacing, rem is often the more accessible choice.

Do I need a CSS framework like Bootstrap for responsive design?

No, not necessarily. With modern CSS (Flexbox, Grid, media queries, relative units), responsive design is fully achievable without a framework. Frameworks can save time, but they’re an additional tool, not a requirement for beginners.