CODEWITHSUNDEEP
htmlcssiframemedia-queries
willking
willking

Reputation: 155

Media Query taking lowest query over queries at wider widths

I have run into an issue with my media queries, only on mobile width devices where, the lowest query (max-width: 320px) is taken over (max-width: 414px) when the screen is at 414px and (max-width: 375px) when the screen is at 375px. I am not setting !important on the 320px. The larger media queries work at (max-width: 768px) and above. Has anyone else experienced this behavior?

My queries are from high to low order in the stylesheet, do I need to flip them from low to high?

@media (max-width: 768px) 

@media (max-width: 414px)

@media (max-width: 375px)

@media (max-width: 320px)

Upvotes: 0

Views: 95

Answers (1)

Ito Pizarro
Ito Pizarro

Reputation: 1607

I started making a test case (below) and realized that it may be as simple as running afoul of the browser's interpretation of the viewport.

#foo {
  margin: 10px;
  padding: 10px;
  background-color: #ff0;
}

#foo:after {
  content: "Default CSS";
}

@media (max-width: 768px) {
  #foo {
    background-color: #f0f;
  }
  #foo:after {
    content: "Max Width 768";
  }
}

@media (max-width: 414px) {
  #foo {
    background-color: #00f;
  }
  #foo:after {
    content: "Max Width 414";
  }
}

@media (max-width: 375px) {
  #foo {
    background-color: #0f0;
  }
  #foo:after {
    content: "Max Width 375";
  }
}

@media (max-width: 320px) {
  #foo {
    background-color: #f00;
  }
  #foo:after {
    content: "Max Width 320";
  }
}
<div id="foo"></div>

Upvotes: 0

Related Questions