Grow your CSS skills. Land your dream job.

nth child issues

  • # June 12, 2012 at 9:25 pm

    Hello Tricksters!

    I’m experiencing some weirdness with nth child, and I have no idea what is causing it.

    Take a look at the site I’m working on: http://www.mandalacustomshapes.com

    When you shrink the layout and the homepage grid responds – the nth child rules fall apart about half way down the page… This is fixed if I remove one of the board divs. I’m using even and odd as the selector. Am I doing this wrong?

    Any help is always appreciated. and the highest of internet fives if you can help me fix this :)

    # June 13, 2012 at 9:23 am

    Hi, iagainsti.

    It looks like your problem is here:

    @media screen and (max-width: 980px) {
    section.board-wrapper div:nth-child(3n+0) {
    margin-right: 4%;
    }
    }

    It also looks like that the following is overriding your nth-child(even) selector:

    wrapper div:nth-child(2n+2) {
    margin-right: 0;
    }

    It looks like you are making use of the nth-child selector a few to mant times.

    I hope I have helped!!

    If I wasn’t at work, I would try helping you some more!

    -Mike

    # June 13, 2012 at 11:37 am

    That was it. But I think I need 2 declarations there. I just changed them to even and odd and it works just fine now.
    *EDIT*
    Forgot your super internet high-five! Thanks!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".