Search code examples
csssafarimedia-queriesmobile-safari

Safari CSS media query combined with OR not workign

Why is this not working Safari Browser? The rules inside that block are not firing.

@media(max-width:1280px) OR (max-height:1080px) {

}

When i make two blocks, one with max-width: 1280 and one with max-height:1080 then it's working. Does Safari Browser does not support OR combination in Media Queries?

Solution

  • The "or" media query is a comma-separated statement, like so:

    @media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

    Example from CSS Tricks

    W3Schools has good resources too