Media Query with orientation landscape ignores max-width

Question

I'm trying to implement a landscape mobile design for a website. While working on a version for iPhone SE & iPhone 12 I noticed the following:

I adjusted the top value in two breakpoints for one of my div classes:

@media (min-width: 844px), screen and (orientation: landscape) { 
    .search-wrapper {
        top: 150px;
    }
}

@media (max-width: 667px), screen and (orientation: landscape) { 
    .search-wrapper {
        top: 65px;
    }
}

For some reason when I test in Google Chrome with a width of 890px, the styles within max-width: 667px are applied. I don't understand why, shouldn't it only be detected if device width is less than or equal to 667px? It seems like currently it only detects orientation: landscape and applies the styles without looking at max-width. Can anyone see the problem?

Answer 1

Okay, I found the mistake:

@media (max-width: 667px), screen and (orientation: landscape) {}

There is a comma there, this means max-width: 667px OR orientation:landscape, so the browser will check them seperately.

Doing it like this it will work:

@media screen and (max-width: 667px) and (orientation: landscape) {}