CODEWITHSUNDEEP
htmltwitter-bootstrapcss
sayousayou
sayousayou

Reputation: 3

Media Query CSS3 doesn't work for max-width: 420px

I wanna make my website responsive and all sizes correctly work, but the problem is when the screen is <420px they use the media query 992px information, not the 420px why ? the problem is all classes work correctly in 420px but in this class, they take the 992px 

@media (max-width: 420px) {
  div.test {
    width: 200px;
  }
}
<div class="container test">
  <img src="img/img.png">
</div>

Upvotes: 0

Views: 322

Answers (2)

Drew Kennedy
Drew Kennedy

Reputation: 4168

It sounds like you're calling a max-width:992px media query after your max-width:420px media query is defined. Keep in mind CSS is compiled top-down, and your logic needs to accommodate this. Instead, consider your media query order:

@media (max-width:992px) {
    ...
}

@media (max-width:420px) {
    ...
}

Upvotes: 3

Narxx
Narxx

Reputation: 8299

The best practice is to build the site "mobile first", meaning the default values are for the mobile version, and then you can override width definitions using media queries.

So if you want 200px on 420px width, and 400px on 992px width, you should do something like:

.test {
  width: 200px;
}
@media screen and (min-width: 992px) {
  .test {
    width: 400px;
  }
}

Always use min-width and always start with the small resolution and override with bigger resolutions.

Upvotes: 1

Related Questions