CODEWITHSUNDEEP
cssmedia-queries
somdow
somdow

Reputation: 6318

Multiple Media Queries doesnt work. i dont understand

Quite simply, for as long as ive been using media queries, ive had a problem where when trying to combine them like so(below)

@media screen and (max-width: 600px) and (max-height:400px) {
    /* code here */
}

it NEVER works, i always have to seperate them like so

@media screen and (max-width: 600px) {
    /* code here */
}

then

@media screen and (max-height: 600px) {
    /* code here */
}

As an example, here is some code to show what i mean.

the first link is with the media queries combined.(doesnt work)

http://somdow.com/4testing/b/

and this second link is with them separated.(works)

http://somdow.com/4testing/b/index2.html

Not a huge deal but after a while, it does bloat the code somewhat plus, it should work which leaves me stumped.

Any ideas as to why? Thanks in advanced.

Upvotes: 0

Views: 70

Answers (1)

Kustolovic
Kustolovic

Reputation: 172

@media screen and (max-width: 600px) and (max-height:400px) {
  /* code 1 */
}

works very well, but only happens if the width is less than 600px and the height is less 400px (the two conditions have to match):

  • 800x300 : doesn't apply
  • 500x500 : doesn't apply
  • 400x300 : apply

What you want is an OR condition (not an AND) and you can acheive this like that:

@media screen and (max-width: 600px), screen and (max-height: 400px) {
    /* code 1 */
}
  • 800x300 : apply
  • 500x500 : apply
  • 400x300 : apply

Upvotes: 3

Related Questions