Media Query taking lowest query over queries at wider widths

Question

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)

Can you post a little more of your CSS? My test case (in my answer below) seems to work as expected so I'm curious if it is a cascading property that maybe isn't being restored/overridden directly. — Ito Pizarro, Jun 16 '17 at 23:48

score 0 · Answer 1 · answered Jun 16 '17 at 17:57

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>

Media Query taking lowest query over queries at wider widths

1 Answers1