How to Write Media Queries for Responsive Design

What Is a Media Query?

A media query is a CSS rule that applies styles only when specific conditions are met , typically a screen width range. Without media queries, your CSS applies the same layout to every screen size. With media queries, you can serve a single-column layout to mobile phones and a three-column layout to desktops using the same HTML file.

The basic syntax is:

@media [media-type] and ([condition]) { /* CSS rules here */ }

The most common media type is screen. The most common condition is max-width or min-width with a pixel value.

What Are the Three Components of a Media Query?

There are three things needed for writing media queries when you want to create a responsive design:

1. The optional comment identifier. This doesn't affect the design , it's a note for developers who edit the code later. Example: /* For mobile phones: */

2. The condition. This defines when the CSS inside the query applies. You can check what conditions to use by testing the screen resolution of your target devices. Most mobile phones have screens under 600px wide.

@media only screen and (max-width: 600px)

3. The CSS rules. These apply only when the condition is met , background color, font size, column width, padding, display type, and so on.

Mobile-First vs. Desktop-First: Which Approach Should You Use?

This is the most important methodology decision in responsive CSS development.

Desktop-first uses max-width conditions , you start with desktop styles and override them for smaller screens: @media only screen and (max-width: 768px) { /* tablet styles */ }

Mobile-first uses min-width conditions , you start with mobile styles as the default and add complexity for larger screens: @media only screen and (min-width: 768px) { /* tablet and up */ }

Mobile-first is the better choice for almost all new projects. Google indexes your mobile version first, and starting with the simplest layout (mobile) and adding complexity for larger screens results in leaner, faster CSS. Most modern CSS frameworks like Tailwind CSS and Bootstrap 5 use mobile-first by default.

Standard Breakpoints for Responsive Design

These are the most widely used breakpoints in 2026, aligned with common device widths:

• 480px: Small mobile phones
• 600px: Large mobile phones (landscape)
• 768px: Tablets (portrait)
• 1024px: Tablets (landscape) / small laptops
• 1200px: Desktop
• 1440px: Large desktop / widescreen

These are starting points, not rules. The best breakpoints for your site are the widths at which your specific content starts to break or look awkward. Design for your content first, then add breakpoints where needed.

A Real-World Responsive Layout Example

Here is a practical mobile-first example for a three-column layout that collapses on small screens. This approach , starting with a single column, then adding columns as the screen grows , is how most production sites are built today:

/* Default: single column for mobile */
.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-left, .main-content, .sidebar-right { width: 100%; }

/* Tablet: two columns */
@media screen and (min-width: 768px) {
  .container { flex-direction: row; flex-wrap: wrap; }
  .main-content { width: 70%; }
  .sidebar-right { width: 28%; }
  .sidebar-left { width: 100%; }
}

/* Desktop: full three-column layout */
@media screen and (min-width: 1024px) {
  .sidebar-left { width: 20%; }
  .main-content { width: 55%; }
  .sidebar-right { width: 23%; }
}

Notice the progression: mobile gets one column by default, tablet gets two columns, desktop gets three. Each media query only adds what it needs , it doesn't override from scratch. This is the core benefit of mobile-first: each breakpoint is additive, not a rewrite.

Common Media Query Mistakes

Several patterns consistently cause problems when writing media queries for the first time:

• Using max-width and min-width inconsistently , mixing desktop-first and mobile-first approaches in the same stylesheet creates rule conflicts that are hard to debug. Pick one approach and stick to it throughout the file.
• Setting breakpoints at device sizes rather than content breakpoints , "768px for iPad" is less reliable than "the width at which my sidebar becomes too narrow." Devices change; your content's breaking points don't.
• Forgetting the meta viewport tag , without <meta name="viewport" content="width=device-width, initial-scale=1"> in your HTML head, media queries won't work on mobile at all. The browser renders the desktop layout zoomed out instead of triggering your breakpoints.
• Overusing breakpoints , more than 4–5 breakpoints usually signals that the base layout isn't flexible enough. Flexbox and CSS Grid handle a lot of responsiveness natively.
• Not testing at the exact breakpoint boundary , test at 767px and 768px (or whatever your breakpoint is), not just at "mobile" and "desktop." Boundary bugs only appear exactly at the transition point.

Container Queries: What Changed in CSS

Media queries respond to the viewport width , the total width of the browser window. This creates a practical limitation: a component in a narrow sidebar needs different styles than the same component in a full-width section, but a media query can't tell them apart because it only sees the viewport.

Container queries, now supported in all major browsers (Chrome 105+, Firefox 110+, Safari 16+), solve this by letting you write styles based on the width of a parent element rather than the viewport:

/* Define a containment context on the parent */
.card-container { container-type: inline-size; }

/* Style based on container width, not viewport */
@container (min-width: 400px) {
  .card { display: flex; flex-direction: row; }
}
@container (max-width: 399px) {
  .card { display: block; }
}

Container queries don't replace media queries , you still need media queries for page-level layout decisions. But for reusable components like cards, widgets, and nav elements, container queries give you component-level responsiveness that media queries can't provide. If you're building a Shopify or WordPress theme in 2026, container queries are worth learning.

Testing Your Media Queries

Test responsive designs using your browser's DevTools (F12 in Chrome or Firefox), then click the device toolbar icon to simulate specific screen widths. Test at your exact breakpoints , 767px vs. 768px, for example , to catch boundary issues. You can also test the screen resolution of your own devices to verify which breakpoints they trigger.

For a deeper look, see our complete guide to What is Responsive Web Design?.

Combining Media Queries With Flexbox and CSS Grid

Flexbox and CSS Grid handle much of the heavy lifting for responsive layouts natively, but media queries are still needed when you want a fundamental change in layout direction or structure at a specific breakpoint. These are the patterns that appear most often in production code:

Flexbox Direction Change at a Breakpoint

/* Mobile: stack vertically */
.nav { display: flex; flex-direction: column; gap: 8px; }

/* Desktop: horizontal row */
@media screen and (min-width: 768px) {
  .nav { flex-direction: row; gap: 24px; }
}

This is the most common media query + flexbox pattern: a vertical stack on mobile that switches to a horizontal layout on wider screens.

CSS Grid Column Count Change

/* Mobile: one column */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Tablet: two columns */
@media screen and (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: three columns */
@media screen and (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

CSS Grid's repeat() function makes column count changes straightforward. Each breakpoint adds columns without rewriting the layout logic.

When to Skip Media Queries With Grid

For evenly-spaced card grids where you want as many columns as will fit, auto-fill or auto-fit with minmax() handles responsiveness without any media queries at all:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

This creates as many 250px-wide columns as fit the container, collapsing to a single column on small screens automatically. Use this for card layouts and product grids. Use explicit media queries when you need precise control over exactly when layouts change.