How to Make a Website Responsive With CSS Media Queries

Learning how to make website responsive with CSS media queries is one of the most valuable skills a front-end developer can pick up. More than half of all web traffic comes from mobile devices, and Google ranks sites using mobile-first indexing — which means your page is judged primarily on how it looks and performs on a small screen. If your layout only works on a desktop monitor, you are losing visitors, rankings, and revenue.

Media queries are the mechanism CSS gives you to apply different styles depending on the device’s characteristics — most commonly its viewport width. With a handful of well-placed breakpoints, a fluid layout, and a few responsive techniques, you can make one codebase look great on a phone, a tablet, a laptop, and a 4K monitor. This guide walks you through the whole process, from the viewport meta tag to production-ready breakpoints.

In This Guide

Step 1: Set the Viewport Meta Tag

Phone beside code editor with CSS media queries for a responsive website layout

Before a single media query can work correctly, you need the viewport meta tag in your document’s <head>. Without it, mobile browsers render the page at a virtual width of about 980 pixels and then shrink it down to fit the screen — which makes your media queries for narrow screens never fire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Page</title>
</head>

The width=device-width part tells the browser to match the layout viewport to the device’s actual screen width. The initial-scale=1.0 sets the starting zoom level. This one line is the difference between media queries working and appearing broken, so verify it exists before debugging anything else.

Step 2: Adopt a Mobile-First Approach

A media query uses @media to wrap a block of styles that only apply when a condition is true. The most maintainable way to use them is mobile-first: write the base styles for the smallest screens first, then use min-width queries to add or change styles as the viewport gets wider.

/* Base styles: mobile, single column */
.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  padding: 1rem;
}

/* Tablets and up: two columns */
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktops and up: three columns */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
  }
}

Why min-width beats max-width

The older desktop-first style uses max-width queries to strip things away as screens shrink. It works, but it tends to pile up overrides and sends desktop-sized CSS to phones. Mobile-first flips that: the phone gets the smallest, fastest payload, and complexity is added progressively. This also aligns with Google’s mobile-first indexing, since your base markup is already the mobile experience.

The media query syntax you actually need

Media queries can test width, height, orientation, resolution, and user preferences. In practice, these four cover the vast majority of responsive work:

/* Width-based breakpoints */
@media (min-width: 768px) { /* ... */ }

/* Orientation: portrait vs landscape */
@media (orientation: landscape) { /* ... */ }

/* High-resolution displays */
@media (min-resolution: 2dppx) { /* ... */ }

/* Respect users who reduce motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

You can also combine conditions with and, for example @media (min-width: 768px) and (orientation: landscape). For full details on every media feature, the MDN guide to CSS media queries is the authoritative reference.

Step 3: Choose the Right Breakpoints

Beginners often ask how to make website responsive with CSS media queries by copying someone else’s breakpoint list. The better approach: let your design decide. Start narrow, slowly widen the browser, and add a breakpoint wherever the layout starts to look broken or awkward — where a line of text gets too long, a card gets too wide, or whitespace looks wrong.

Common breakpoints as a starting point

That said, a sensible default set saves time. These values reflect where today’s devices cluster:

/* Small phones (base styles, no query needed) */

/* Large phones / small tablets */
@media (min-width: 480px) { /* ... */ }

/* Tablets */
@media (min-width: 768px) { /* ... */ }

/* Small laptops */
@media (min-width: 1024px) { /* ... */ }

/* Desktops */
@media (min-width: 1280px) { /* ... */ }

/* Large monitors */
@media (min-width: 1536px) { /* ... */ }

Fewer breakpoints are better

Resist the urge to target specific devices (“iPhone 14”, “iPad Pro”). Device dimensions change every year; your content’s breaking points are what matter. Most well-built sites need only three or four breakpoints. If you find yourself adding more than six, the underlying layout probably needs flexible units rather than more queries — which leads directly to the next step.

Step 4: Build a Fluid Layout With Flexible Units

Media queries handle the big layout shifts, but between breakpoints your design should stretch and compress gracefully. That means replacing fixed pixel widths with relative units wherever possible.

Use percentages, fr, and flex for structure

.container {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
}

.two-column {
  display: flex;
  gap: 2rem;
}

.two-column > main {
  flex: 2;
}

.two-column > aside {
  flex: 1;
}

@media (max-width: 767px) {
  .two-column {
    flex-direction: column;
  }
}

Notice the max-width here is intentional: this is a case where one specific desktop behavior (a sidebar) collapses at a known point, and a single max-width override is cleaner than restructuring the mobile-first stack. Rules of thumb are guides, not laws.

Prefer rem and em over px for spacing and type

Relative font units let your whole interface scale when users change their browser’s default font size — an accessibility win. Set a sane root size, then size everything else in rem:

html {
  font-size: 100%; /* respects the user's browser setting */
}

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

Let Grid do the responsive work for you

Modern CSS Grid can create responsive layouts with zero media queries using auto-fit and minmax():

.auto-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

This single rule produces as many columns as fit, each at least 260px wide — collapsing to one column on phones automatically. Combine intrinsic responsiveness like this with media queries for the macro layout, and you’ll write far fewer breakpoints. If you’re unsure which layout tool to reach for, read our breakdown of CSS Flexbox vs Grid and when to use each.

Step 5: Make Typography and Images Responsive

Layout is only half the battle. Text that requires horizontal scrolling and images that overflow their containers are the two most common responsive failures on real sites.

Fluid typography with clamp()

The clamp() function lets font size scale smoothly between a minimum and maximum based on viewport width — no media queries needed:

h1 {
  /* min 1.75rem, preferred 4vw + 1rem, max 3.5rem */
  font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}

.lead {
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.35rem);
}

The middle value is the fluid part: it grows with the viewport while the two ends keep it readable on tiny phones and sensible on huge monitors. Set a comfortable line length too — around 60 to 75 characters per line — by limiting body text width with max-width: 65ch.

Images that never overflow

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

These three declarations solve nearly every image overflow problem: the image scales down with its container but never scales up beyond its natural size, and height: auto preserves the aspect ratio. For art direction — serving a cropped mobile version versus a wide desktop hero — use the <picture> element:

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.jpg">
  <source media="(min-width: 640px)" srcset="hero-medium.jpg">
  <img src="hero-small.jpg" alt="Developer workspace showing a responsive website on laptop and phone">
</picture>

And for bandwidth, add srcset with width descriptors so phones don’t download a 2400px image. Don’t forget that every image needs descriptive alternative text — see how to write alt text for images for a beginner-friendly walkthrough.

Navigation is where most desktop designs break on mobile. A row of eight menu links fits a 1440px monitor but not a 375px phone. The standard solution is a hamburger menu that appears below a breakpoint.

A simple responsive nav pattern

<nav class="site-nav">
  <button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu">
    Menu
  </button>
  <ul id="nav-menu" class="nav-menu">
    <li><a href="/">Home</a></li>
    <li><a href="/tutorials">Tutorials</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

.nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu.open {
  display: block;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
  .nav-menu {
    display: flex;
    gap: 1.5rem;
  }
}

const toggle = document.querySelector('.nav-toggle');
const menu = document.querySelector('.nav-menu');

toggle.addEventListener('click', () => {
  const isOpen = menu.classList.toggle('open');
  toggle.setAttribute('aria-expanded', isOpen);
});

A few lines of JavaScript toggle the menu on small screens; above 768px the full horizontal nav appears and the button hides. The aria-expanded attribute keeps it accessible to screen readers.

Tables, forms, and other tricky components

Data tables: wrap them in a container with overflow-x: auto so they scroll horizontally on phones instead of breaking the layout.
Forms: stack labels above inputs on mobile; multi-column forms should collapse to one column below your tablet breakpoint.
Modals and dialogs: use max-width: calc(100vw - 2rem) and max-height: 90vh so they never exceed the screen.
Embedded videos: wrap iframes in an aspect-ratio container so they scale: aspect-ratio: 16 / 9; width: 100%;.

Small alignment tasks come up constantly in responsive work — for instance, keeping a single element centered across breakpoints. Our guide to how to center a div with every CSS method covers flex, grid, and margin techniques you can reuse anywhere.

Step 7: Test and Debug Your Responsive Design

Writing media queries is the easy part; verifying them is where quality comes from. Build testing into your workflow from the start.

Use browser DevTools device mode

Chrome, Firefox, and Edge all include a device toolbar (press Ctrl+Shift+M in Firefox or Ctrl+Shift+I then the device icon in Chrome) that emulates common phone and tablet viewports, touch input, and device pixel ratio. Drag the handles to sweep continuously through widths and watch where your design breaks — those are your real breakpoints.

A debugging checklist

Horizontal scroll: at 320–360px wide, no element should force sideways scrolling. In DevTools, run document.querySelectorAll('*') and check for elements wider than the viewport.
Tap targets: buttons and links should be at least 44×44px on touch screens.
Text contrast: shrinking text over images often fails contrast checks — test at each breakpoint.
Real devices: emulators are good, but test on at least one real phone before launch; OS-level behaviors like Safari’s dynamic toolbar affect visible height.
Performance: mobile users are often on slower networks. Keep CSS lean, defer non-critical styles, and serve appropriately sized images.

Mind the 100vh trap

On mobile browsers, 100vh includes the area behind the address bar, so full-height heroes can appear cut off or cause jumps when scrolling. Prefer 100dvh (dynamic viewport height) with a fallback:

.hero {
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100dvh;  /* tracks the visible area */
}

The dvh, svh, and lvh units are documented on MDN’s CSS length reference alongside every other unit mentioned in this guide.

Frequently Asked Questions

How many media queries does a responsive website need?

Most sites need only three or four. Start with mobile-first base styles, then add min-width breakpoints where your content actually breaks — typically around 640px, 768–1024px, and 1280px. Modern CSS like auto-fit grids, flexbox, and clamp() typography handle the in-between sizes, so you shouldn’t need a query for every device.

Should I use min-width or max-width in media queries?

Use min-width for a mobile-first workflow: base styles target phones, and each query adds layout for wider screens. This keeps the mobile payload small and matches how Google indexes your site. max-width (desktop-first) still has legitimate uses, such as collapsing a specific desktop component — like a sidebar — at one known width.

Why are my media queries not working on mobile?

The number one cause is a missing viewport meta tag: without <meta name="viewport" content="width=device-width, initial-scale=1.0">, mobile browsers render at ~980px and your narrow-screen queries never match. Other common causes: CSS specificity conflicts where a later rule overrides the query, typos in the query syntax, and cached stylesheets — hard-refresh or test in a private window.

Can I make a website responsive without media queries?

Partially. Fluid units, flexbox, auto-fit/minmax() grids, clamp() typography, and responsive images can carry a simple layout a long way. But for structural changes — collapsing navigation, reordering content, switching from multi-column to single-column — media queries (or the newer container queries) remain essential.

What is the difference between responsive and mobile-first design?

Responsive design is the outcome: one site that adapts to any screen size. Mobile-first is the strategy for getting there: designing and coding for the smallest screen first, then enhancing for larger ones. You can build a responsive site desktop-first with max-width queries, but mobile-first produces leaner CSS and a better mobile experience, which is what search engines now prioritize.

Do media queries affect page speed?

Media queries themselves are cheap — the browser evaluates them in microseconds. What affects speed is the CSS and assets they gate: avoid loading large desktop background images on mobile (use media queries to conditionally apply them), keep your stylesheet lean, and serve responsive image sizes with srcset so phones don’t download desktop-sized files.

Key Takeaways

Add the viewport meta tag first — without it, mobile media queries silently fail.
Write mobile-first CSS with min-width breakpoints so phones get the leanest payload.
Choose breakpoints from your content’s breaking points, not from device spec sheets; three or four is usually enough.
Use fluid units (%, fr, rem, clamp()) so layouts adapt between breakpoints without extra queries.
Make images responsive with max-width: 100%, srcset, and the <picture> element for art direction.
Collapse navigation, tables, and multi-column forms deliberately at your tablet breakpoint.
Test in DevTools device mode, verify on a real phone, and watch out for the 100vh mobile browser trap — use 100dvh instead.

Putting It All Together: How to Make Website Responsive With CSS Media Queries

Responsive design isn’t a single trick — it’s a stack of small, correct decisions. The viewport meta tag unlocks mobile rendering, mobile-first media queries structure your breakpoints, fluid units and modern layout tools handle everything between them, and deliberate component handling (navigation, tables, forms, media) covers the edge cases. Work through the seven steps in this guide on your next project, test at real device widths as you go, and you’ll ship a site that feels native on every screen.

Mastering how to make website responsive with CSS media queries takes practice, but the pattern is always the same: start small, add breakpoints where the design breaks, and let flexible CSS do the rest. Do that consistently, and responsive stops being a separate task — it just becomes how you write CSS.

ByJason Martin