Skip to main content

Forums

This topic contains 1 reply, has 2 voices, and was last updated by  caligula 4 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #278490

    leorapirap
    Participant

    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!

    #278738

    caligula
    Participant

    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-link icon-logo-star icon-search icon-star