Ask any question about CSS here... and get an instant response.

Why is my media query for max-width not applying when I resize the browser window?

Asked on Nov 01, 2025

Answer

Media queries are a powerful tool for responsive design, but they can sometimes be tricky if not set up correctly. If your max-width media query isn't applying, it might be due to incorrect syntax or specificity issues.

<!-- BEGIN COPY / PASTE -->
    <style>
      body {
        background-color: lightblue;
      }

      @media (max-width: 600px) {
        body {
          background-color: lightcoral;
        }
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

Ensure your media query is correctly placed after the styles it is meant to override.
Check if there are any other conflicting styles with higher specificity that might be overriding your media query.
Verify that your viewport meta tag is correctly set in your HTML: <meta name="viewport" content="width=device-width, initial-scale=1">.
Make sure your browser window is actually resizing below the specified max-width.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

Why is my media query for max-width not applying when I resize the browser window?

Asked on Nov 01, 2025

Answer

The Q&A Network