Forums

Give help. Get help.

  • # November 6, 2018 at 5:32 am

    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!

    # November 12, 2018 at 8:04 am

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag