Search code examples
cssmedia-queries

CSS media queries: max-width OR max-height

When writing a CSS media query, is there any way you can specify multiple conditions with "OR" logic?

I'm attempting to do something like this:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}
Solution

  • Use a comma to specify two (or more) different rules:

    @media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

    From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.