Reasons Why CSS Media Queries May Not Work

Media queries may fail for various reasons. Here are some common causes that might prevent media queries from working effectively:

Style Overriding (Common Issue)

CSS rules later in the CSS file may override the styles specified within media queries. Ensure that the CSS code within media queries is not overridden by other selectors or styles with higher specificity. Placing media queries towards the end of the CSS file can help reduce this issue.

It's crucial to understand the specificity of selectors within media queries. Whether the media queries are placed at the outer or inner level, ensure that the selectors within the media queries have higher specificity than those outside, or at least the same level but positioned later in the file. It's best to place them at the end of the CSS file, where subsequent selectors of the same level can override earlier ones, reducing the error rate.

CSS Selector Specificity

In CSS, specificity is determined by four levels: inline styles, ID selectors, class/attribute selectors/pseudo-classes, and element selectors/pseudo-elements, in order from highest to lowest. The number of selectors at each level also affects specificity; more selectors at a certain level increase its specificity. Additionally, the !important rule overrides all other rules that are not marked as !important, regardless of their position or selector specificity.

A simple way to increase specificity in media queries is to use multiple-level selectors. For example, if you want to hide a menu on screens wider than 300px and show it on narrower screens, the HTML and CSS might look like this:

<nav>
  <div class="menu">menu</div>
</nav>

Effective Media Query Usage

Placing Media Queries Later When at the Same Level

For simple CSS with fewer nested selectors, placing media queries directly in the root works:

.menu {
  display: none;
}
@media screen and (max-width: 300px) {
  .menu {
    display: block;
  }
}

For more complex or deeply nested CSS, it's recommended to write media queries immediately following the corresponding selectors within parent elements to maintain a clean code structure:

nav {
  .menu {
    display: none;
  }
  @media screen and (max-width: 300px) {
    .menu {
      display: block;
    }
  }
}

Using Multiple-Level Tags in Media Queries

Since multi-level tags have higher specificity than single tags, the position of the media queries becomes flexible, ensuring they will be effective on screens narrower than 300px:

.menu {
  display: none;
}
@media screen and (max-width: 300px) {
  nav .menu {
    display: block;
  }
}

@media screen and (max-width: 300px) {
  nav .menu {
    display: block;
  }
}
.menu {
  display: none;
}

Common Reasons for Ineffectiveness

Higher Specificity Outside Media Queries

Using multi-level selectors outside the media query and simpler selectors inside will prevent the media query from taking effect, even if placed at the end of the CSS file:

nav .menu {
  display: none;
}
/* Media query will not be effective */
@media screen and (max-width: 300px) {
  .menu {
    display: block;
  }
}

Other Potential Issues

Syntax Errors: Ensure correct syntax in media queries, including parentheses, curly braces, semicolons, and correct use of keywords.
CSS Load Order: Verify the correct order of linked or imported CSS files, especially when using external stylesheets.
Missing Meta Tag: The absence of the necessary meta tag in the HTML document's head can affect media queries on mobile devices:
```
<meta name="viewport" content="width=device-width, initial-scale=1" />
```
Condition Mismatch: Check if the conditions within the media queries match the current viewing environment.
Inaccurate Device Emulation: Some development tools may not emulate devices accurately, making it seem like media queries aren't working when they do on actual devices.

Incorrect Media Type: Specifying the wrong media type, such as using print instead of screen, can cause the media queries to be ineffective:

.menu {
  display: none;
}

/* Will not be effective */
@media print and (max-width: 375px) {
  .menu {
    display: block;
  }
}

Blog.

Reasons Why CSS Media Queries May Not Work