CSS Media Queries

By /

In this chapter, you will learn about CSS Media Queries. Media Queries allow you to apply different CSS styles based on the screen size or device.For example, you can show a layout in multiple columns on a desktop and change it to a single column on a mobile phone. Let’s start with understanding CSS Media Queries step by step.

What are CSS Media Queries?

A CSS Media Query allows you to apply CSS rules only when a specific condition is true.For example:

@media (max-width: 600px) {
  /* CSS rules */
}

This means the CSS rules inside the media query will apply when the screen width is 600px or smaller. Media Queries are commonly used to make websites responsive.

1. Using max-width

The max-width media query applies styles when the screen width is equal to or smaller than a specific size.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Max Width Media Query</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .box {
      width: 500px;
      padding: 30px;
      background-color: lightblue;
      margin: auto;
    }

    @media (max-width: 600px) {
      .box {
        width: auto;
        background-color: lightgreen;
      }
    }
  </style>
</head>

<body>

  <div class="box">
    Resize the browser window.
  </div>

</body>
</html>

When the screen width becomes 600px or smaller:

  • The box width changes.
  • The background color changes.

2. Using min-width

The min-width media query applies styles when the screen width is equal to or larger than a specific size.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Min Width Media Query</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .box {
      padding: 30px;
      background-color: lightblue;
      text-align: center;
    }

    @media (min-width: 700px) {
      .box {
        background-color: lightgreen;
        font-size: 24px;
      }
    }
  </style>
</head>

<body>

  <div class="box">
    Resize the browser window.
  </div>

</body>
</html>

When the screen width is 700px or larger, the new styles are applied.

3. Changing a Layout for Mobile Screens

Media Queries are often used to change a layout when the screen becomes smaller. For example, you may have three columns on a large screen and one column on a mobile phone.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Layout with Media Query</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .container {
      display: flex;
      gap: 20px;
    }

    .box {
      flex: 1;
      padding: 30px;
      background-color: lightblue;
      text-align: center;
    }

    @media (max-width: 600px) {
      .container {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="box">Box 1</div>

    <div class="box">Box 2</div>

    <div class="box">Box 3</div>

  </div>

</body>
</html>

On larger screens, the boxes appear next to each other. When the screen becomes 600px or smaller, the boxes appear one below another.

4. Changing Text Size

Media Queries can also change the size of text.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Text</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    h1 {
      font-size: 50px;
    }

    @media (max-width: 600px) {
      h1 {
        font-size: 30px;
      }
    }
  </style>
</head>

<body>

  <h1>Responsive Heading</h1>

  <p>
    The heading becomes smaller on smaller screens.
  </p>

</body>
</html>

Large text that looks good on a desktop may be too big for a mobile screen.

Media Queries help you adjust it.

5. Using Multiple Media Queries

You can use multiple Media Queries for different screen sizes.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Media Queries</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .box {
      padding: 30px;
      background-color: lightblue;
      text-align: center;
    }

    @media (max-width: 900px) {
      .box {
        background-color: lightgreen;
      }
    }

    @media (max-width: 600px) {
      .box {
        background-color: lightyellow;
      }
    }
  </style>
</head>

<body>

  <div class="box">
    Resize the browser window.
  </div>

</body>
</html>

In this example:

  • On large screens, the box is light blue.
  • On screens 900px or smaller, it becomes light green.
  • On screens 600px or smaller, it becomes light yellow.

6. Common Screen Sizes

You may often see Media Queries using values like:

@media (max-width: 768px) {
  /* Tablet and smaller screens */
}

@media (max-width: 480px) {
  /* Smaller mobile screens */
}

However, there is no single perfect screen size for every website. Instead of thinking only about specific devices, change your layout when the design starts looking uncomfortable or crowded.

7. Mobile-First Approach

A common approach in responsive design is called mobile-first. This means you first write CSS for smaller screens and then add styles for larger screens using min-width.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Mobile First Design</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .box {
      padding: 30px;
      background-color: lightblue;
      text-align: center;
    }

    @media (min-width: 768px) {
      .container {
        flex-direction: row;
      }
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="box">Box 1</div>

    <div class="box">Box 2</div>

    <div class="box">Box 3</div>

  </div>

</body>
</html>

By default, the boxes appear one below another. When the screen width reaches 768px or more, the boxes appear in a row.

8. Media Queries with CSS Grid

Media Queries can also change the number of columns in a Grid layout.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Grid Media Query</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .box {
      padding: 30px;
      background-color: lightgreen;
      text-align: center;
    }

    @media (max-width: 700px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="box">Box 1</div>

    <div class="box">Box 2</div>

    <div class="box">Box 3</div>

  </div>

</body>
</html>

On larger screens, the layout has three columns.

On smaller screens, the layout changes to one column.

9. A Simple Responsive Website Example

Now let’s combine what we have learned.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Website</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    header {
      padding: 30px;
      background-color: blue;
      color: white;
      text-align: center;
    }

    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
    }

    .card {
      flex: 1;
      padding: 30px;
      background-color: lightblue;
      text-align: center;
    }

    @media (max-width: 600px) {
      header {
        padding: 20px;
      }

      .container {
        flex-direction: column;
      }

      .card {
        padding: 20px;
      }
    }
  </style>
</head>

<body>

  <header>
    <h1>My Website</h1>
  </header>

  <div class="container">

    <div class="card">
      HTML
    </div>

    <div class="card">
      CSS
    </div>

    <div class="card">
      JavaScript
    </div>

  </div>

</body>
</html>

On smaller screens:

  • The cards move into a single column.
  • The header becomes smaller.
  • The card spacing is adjusted.

This is a simple example of how Media Queries help create responsive websites.

Quick Recap

  • Media Queries apply CSS based on specific conditions.
  • max-width is commonly used for smaller screens.
  • min-width is commonly used for larger screens.
  • Media Queries can change layouts, text sizes, colors, and spacing.
  • You can use multiple Media Queries in one stylesheet.
  • Media Queries work well with Flexbox and CSS Grid.

Frequently Asked Questions (FAQs)

Q1. What are CSS Media Queries?

CSS Media Queries allow you to apply different CSS styles based on conditions such as screen width, helping create responsive websites.

Q2. How do CSS Media Queries work?

CSS Media Queries check conditions such as max-width or min-width and apply specific CSS rules when those conditions are met.

Q3. How are CSS Media Queries used for responsive web design?

CSS Media Queries can change layouts, text sizes, spacing, and Grid or Flexbox columns to make websites work better on different screen sizes.

Q4. Is this CSS Media Queries tutorial suitable for beginners?

Yes. This CSS Media Queries tutorial for beginners explains responsive design, max-width, min-width, breakpoints, and mobile-first layouts with simple examples.

Q5. Can CSS Media Queries be used with Flexbox and CSS Grid?

Yes. CSS Media Queries can change Flexbox directions and CSS Grid columns based on the available screen size.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top