CODEWITHSUNDEEP
cssmedia-queries
simplyzeke
simplyzeke

Reputation: 62

Two max widths in media query

I saw someone use this in code and was wondering how this will work. I've seen min-width and max-width but never this. Does this mean only run when width is less than 460px, making the 768px max-width parameter irrelevant?

@media (max-width: 768px) and (max-width: 460px) {
 CSS goes here
}

Upvotes: 0

Views: 1599

Answers (1)

Sam Jacobs
Sam Jacobs

Reputation: 346

It's not a special thing, it will take the smallest max width

https://jsfiddle.net/

.dog {
  background: green;
  height: 200px;
  width: 200px
}

.width {
  height: 30px;
  background: blue;
  width: 460px;
}
@media (max-width: 460px) and (max-width: 768px) {

  .dog {
    background: red;
  }

}
<div class="width" width="460px">

</div>
<div class="dog">

</div>

Upvotes: 1

Related Questions