Media Queries

Master the CSS technique that makes websites adapt to any screen size automatically.

Media queries are the backbone of responsive web design. Think of them as conditional rules for your CSS — they let you apply different styles based on the device viewing your website. When someone visits WanderLust on their phone versus their desktop, media queries ensure the experience looks perfect on both. A media query works like an if-statement in programming. It says "if the screen is this wide, apply these styles" or "if this is a tablet, use this layout." The browser constantly checks these conditions and applies the matching styles automatically.

Understanding Media Query Syntax

Media queries use the `@media` rule followed by conditions. The basic structure looks like this: check a condition, then apply CSS rules if that condition is true. Every media query has three parts: the media type (screen, print, etc.), a condition (like width), and the styles to apply.

@media

(max-width: 768px)

{ CSS rules }

Media Rule

Condition

Styles

The WanderLust team wants their navigation to stack vertically on mobile devices. Here's how media queries make this happen:

/* Default desktop navigation - horizontal */
.wanderlust-nav {
  display: flex;
  gap: 2rem;
}

/* Mobile navigation - vertical stack */
@media (max-width: 768px) {
  .wanderlust-nav {
    flex-direction: column;
    gap: 1rem;
  }
}

What just happened?

The browser automatically switched from horizontal to vertical navigation when the screen became narrower than 768 pixels. Try this: Resize your browser window to see the media query activate in real-time!

Common Breakpoints

Breakpoints are the screen widths where your design changes. Think of them as decision points where your website says "okay, time for a different layout." Most websites use standard breakpoints based on common device sizes.

Mobile First

320px - 768px
Phones and small tablets

Tablet

768px - 1024px
iPads and medium screens

Desktop

1024px - 1440px
Standard computer screens

Large Desktop

1440px+
Big monitors and TVs

Max-Width vs Min-Width

Understanding the difference between `max-width` and `min-width` is crucial for building responsive sites. These conditions determine when your styles activate based on screen size. max-width means "apply these styles when the screen is this size or smaller" while min-width means "apply these styles when the screen is this size or larger." Think of max-width as a ceiling and min-width as a floor. If you set `max-width: 768px`, the styles work on phones and tablets but stop working on desktop. If you set `min-width: 768px`, the styles only work on tablets and desktop, ignoring phones.

/* WanderLust hero section - different sizes for different screens */

/* Large desktop - biggest hero */
.hero {
  height: 600px;
  background: #0ea5e9;
}

/* Tablet and down - medium hero */
@media (max-width: 1024px) {
  .hero {
    height: 400px;
  }
}

/* Mobile - compact hero */
@media (max-width: 768px) {
  .hero {
    height: 300px;
  }
}

Mobile-First Approach

Mobile-first design means writing CSS for phones first, then adding styles for larger screens using `min-width` media queries. This approach makes your website faster on mobile because phones don't have to download and parse desktop styles they'll never use.

/* WanderLust destination cards - mobile first approach */

/* Mobile styles first (no media query needed) */
.destination-card {
  width: 100%;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
}

/* Tablet and up - 2 columns */
@media (min-width: 768px) {
  .destination-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* Desktop and up - 3 columns */
@media (min-width: 1024px) {
  .destination-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}

Advanced Media Query Features

Media queries can do much more than check screen width. You can target specific device orientations, screen resolutions, and even user preferences. These advanced features help create truly personalized experiences that adapt to how people actually use their devices. Orientation queries detect whether someone is holding their phone vertically (portrait) or horizontally (landscape). This is perfect for adjusting layouts when users rotate their devices.

/* WanderLust booking form - adapts to device orientation */

.booking-form {
  padding: 2rem;
  max-width: 500px;
}

/* Landscape phones - use horizontal space better */
@media (max-width: 768px) and (orientation: landscape) {
  .booking-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  
  .form-group {
    margin-bottom: 0.5rem;
  }
}

/* Portrait - stack everything vertically */
@media (orientation: portrait) {
  .form-group {
    margin-bottom: 1rem;
  }
}

Combining Multiple Conditions

You can combine multiple conditions in one media query using `and`, `or`, and `not` operators. This creates very specific rules that only apply when multiple conditions are met. The WanderLust team uses this to create pixel-perfect responsive designs.

/* WanderLust header - complex responsive behavior */

.wanderlust-header {
  padding: 1rem;
  background: #0ea5e9;
}

/* Tablets in landscape mode only */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .wanderlust-header {
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* High resolution screens (Retina displays) */
@media (min-resolution: 2dppx) {
  .logo-image {
    background-size: 50% 50%;
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  .wanderlust-header {
    background: #1e293b;
    color: #f8fafc;
  }
}

Pro Tip

Use browser developer tools to test media queries. Most browsers let you simulate different screen sizes and orientations without needing actual devices. Chrome DevTools even shows you which media queries are active!

Common Media Query Patterns

Successful responsive websites follow proven patterns that work across different industries. These battle-tested approaches save development time and provide users with familiar experiences. The container pattern keeps content readable on wide screens, while the sidebar collapse pattern maximizes space on mobile.

/* WanderLust responsive container pattern */
.container {
  width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
}

/* Tablet - moderate max width */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
    padding: 0 2rem;
  }
}

/* Desktop - wider but still controlled */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

/* Hide/show elements pattern */
.mobile-menu {
  display: block;
}

.desktop-menu {
  display: none;
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none;
  }
  
  .desktop-menu {
    display: flex;
  }
}

Media queries transform static websites into dynamic, device-aware experiences. They're the bridge between your creative vision and the reality of countless screen sizes, orientations, and user preferences. Master these techniques, and your websites will look perfect whether someone visits on a smartwatch or a 4K monitor.

Quiz

Up Next: Fluid Layouts

Create layouts that stretch and compress smoothly using percentages, viewport units, and flexible containers.

← Previous Course Index Next →