Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS conflicts

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.