Responsive Design & Media Queries — Mobile-First CSS

Why Responsive Design Matters

Over 60% of web traffic comes from mobile devices. If your site only looks good on desktop, you are losing more than half your visitors. Responsive design makes one website work beautifully on all screen sizes.

Media Queries — Conditional CSS

Media queries apply CSS rules only when certain conditions are true (usually screen size):

/* This CSS applies on ALL screens */
.card { padding: 24px; }

/* This CSS ONLY applies when screen is 768px or wider */
@media (min-width: 768px) {
  .card { padding: 32px; }
}

/* Only on screens 480px or narrower */
@media (max-width: 480px) {
  .card { padding: 16px; }
}

Mobile-First Approach (Recommended)

Write CSS for small screens first, then add media queries for larger screens. This keeps your code simpler and prioritises mobile performance:

/* Mobile styles — default (no media query) */
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  .cards {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card {
    flex: 1 1 calc(50% - 8px);
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .card {
    flex: 1 1 calc(33.333% - 11px);
  }
}

Common Breakpoints

Responsive Units

/* % — relative to parent */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* vw / vh — relative to viewport */
.hero { min-height: 100vh; }           /* full screen height */
.banner { width: 100vw; }              /* full screen width */

/* rem — relative to root font size (16px by default) */
h1 { font-size: 2.5rem; }             /* 40px */

/* clamp(min, preferred, max) — responsive without media queries */
h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); }
.container { padding: clamp(16px, 4vw, 48px); }

Responsive Navigation Pattern

/* Mobile: hamburger menu is visible, nav links hidden */
.nav-links {
  display: none;
}
.hamburger {
  display: block;
}

/* Desktop: links visible, hamburger hidden */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
    gap: 8px;
  }
  .hamburger {
    display: none;
  }
}

Testing Responsiveness

In Chrome DevTools (F12): click the device icon at the top left of DevTools to enter Responsive Mode. Drag the edge to resize, or pick a device from the dropdown.

Try It Yourself

1. Make your card grid show 1 column on mobile, 2 on tablet, 3 on desktop
2. Use clamp() for your heading font size so it scales smoothly
3. Test your page in Chrome DevTools responsive mode on different devices