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!