[leorapirapParticipant]

here is my question. looking at the code:
/*iphone 6/7/8 */
@media screen
and (min-width : 375px)
and (max-width : 667px)
{
.box {
border: 2px solid orange;
}
}

/* iphone x */
@media screen
and (min-width : 375px)
and (max-width : 812px)
{
.box {
border: 2px solid red;
}
}

then, if I view my site on iphone 6/7/8 the border remains red. why is this happening? I am expecting the border to be orange because I’m on iphone 6/7/8 view. is this because they have the same min-width and iphone x media query is closer and it would execute first? Can css media queries logic help? Please help!

[caligulaParticipant]

It’s because both rules apply for screens from 375 pixels, and rules later in the source order generally override earlier rules.

[Author]

Posts