Responsive Design & Media Queries (@media)

In Plain English

Over 60% of all web traffic comes from mobile devices. Media queries (@media) allow you to apply specific CSS rules conditionally based on the screen width of the device (e.g. flipping a 3-column desktop grid into a single vertical column on mobile).

The Mental Model

"A media query is like a responsive wardrobe. In winter (screen < 768px), you wear a single compact heavy jacket (1 column). In summer on the beach (screen > 1200px), you spread out a wide 4-person picnic blanket (4 columns)."

Deep Dive: How It Works

@media (max-width: 768px): Applies styles only when screen width is 768px or smaller (tablets & phones).

Mobile-First Approach: Write default styles for phones first, then use @media (min-width: 768px) to add multi-column grids for desktops.

Common Breakpoints: Mobile (< 640px), Tablet (641px - 1024px), Desktop (> 1024px).

Responsive Flexbox: Flipping flex-direction: row on desktop to flex-direction: column on mobile is the universal responsive layout trick.

Syntax Blueprint

/* Desktop Default: 3 Columns */
.grid {
  display: flex;
  gap: 16px;
}

/* Mobile: 1 Column */
@media (max-width: 768px) {
  .grid {
    flex-direction: column;
  }
}

Flip horizontal flex rows into vertical columns on small screens.

Core Rules to Remember

The Viewport Meta Tag: Always ensure <meta name="viewport" content="width=device-width, initial-scale=1.0"> is in your HTML.

Relative Typography on Mobile: Scale down hero headlines from 3rem on desktop to 1.75rem on phones.

Test in DevTools: Press Cmd+Option+I (or F12) and click the Device Toolbar icon to test every phone screen.

Common Beginner Traps & How to Fix Them

Mistake:Writing hardcoded fixed widths inside media queries

Why it happens: Using width: 400px inside a 360px wide phone view causes horizontal scrolling.

How to fix: Use width: 100%; or max-width: 100%; on mobile screens.

Pro Tip: Never hide content on mobile just because it doesn't fit—re-architect it with clean vertical scrolling!

Live Interactive Example

Hit Run Code to see it live

Responsive Grid to Column Flip

CSS3

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: The media query listens for screens narrower than 640px and rotates the flex axis.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Write a mobile media query

Write a media query @media (max-width: 768px) containing a rule for .sidebar setting display: none;

Browser Preview & Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.