Making Your Website Responsive with CSS Media Queries

Published on: June 23, 2024 by Dr. Talib

In today's world, users will visit your site on phones, tablets, laptops, and giant desktop monitors. Responsive design is the practice of ensuring your website looks and works great on all of them. The primary tool we use to achieve this is the CSS Media Query.

What is a Media Query?

The Concept: A media query is a CSS feature that allows you to apply styles only when certain conditions about the device are met. The most common condition is the width of the viewport (the visible area of the browser window).

This lets you say, "If the screen is wider than 768px, use a two-column layout. But if the screen is narrower than 768px, stack the columns into a single column."

The Basic Syntax:

@media (max-width: 600px) {
  /* CSS rules inside here will ONLY apply if the viewport is 600px wide or less. */
  
  body {
    background-color: lightblue;
  }
}

You can use max-width (up to this size) or min-width (from this size and up) to define your "breakpoints."

A Practical Example: A Responsive Card Layout

Let's imagine a container with three cards. On a wide screen, we want them to sit side-by-side. On a narrow screen, we want them to stack vertically.

The HTML and CSS:

<style>
  .container {
    display: flex; /* We use Flexbox for the layout */
    gap: 1rem;
  }

  .card {
    background-color: #4f46e5;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    flex: 1; /* Each card will take up equal space */
  }

  /* THIS IS THE MEDIA QUERY FOR MOBILE */
  @media (max-width: 768px) {
    .container {
      /* On small screens, change the flex direction to column */
      flex-direction: column;
    }
  }
</style>

<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Mobile-First vs. Desktop-First

There are two main strategies for writing responsive styles:

• Desktop-First: You write all your desktop styles first, and then use max-width media queries to override them for smaller screens. (This is what our example above does).
• Mobile-First: You write all your mobile styles first (simple, single-column layouts). Then, you use min-width media queries to add more complex layouts for larger screens.

/* Mobile-First Approach */

/* Base styles for mobile */
.container {
  display: block; /* Simple stacking */
}

/* Add complexity for larger screens */
@media (min-width: 769px) {
  .container {
    display: flex;
  }
}

The **Mobile-First** approach is generally considered the modern best practice. It forces you to prioritize the most important content for small screens and often results in simpler, more efficient CSS.

Build for Every User

By using media queries, you can adapt your designs to provide an optimal experience for every user, regardless of their device. It's no longer an optional feature; it's a fundamental requirement for any professional website.