Grow your CSS skills. Land your dream job.

Does nth:child not work responsively?

  • # May 9, 2012 at 12:54 am

    I’m currently working on a responsive layout made up of a grid of images.

    It starts @ 1200px with a 3 column grid using nth:child(3n+0) – That works just fine.

    But, as my layout shrinks to a 2column grid– the grid refuses to accept the new nth:child(even) rule.
    I’ve checked my css 100 times. Is this a thing? I can’t seem to find anything around the interwebs.

    Code below – I’d post a link, but I’m working locally :-/


    /* Home Page Styles */

    body.home h2{
    display: none;
    }

    section.board-wrapper{
    margin-bottom: 1%;
    }

    section.board-wrapper div{
    width: 32%;
    float: left;
    margin: 0 2% 2% 0;
    }

    section.board-wrapper div:nth-child(3n+0){
    margin-right: 0;
    }


    @media screen and (max-width: 1240px) {
    .wrapper{
    width: 960px;
    }

    header{
    width: 234px;
    }

    header h1{
    background-position: 0px -120px;
    height: 74px;
    width: 232px;
    }

    article.post{
    width: 690px;
    }

    /* Home Page */

    section.board-wrapper div{
    margin: 0 2% 2% 0;
    width: 47%;
    }

    section.board-wrapper div:nth-child(even){
    margin-right: 0;
    }

    }

    # May 9, 2012 at 1:35 am

    It is currently working as expected, you just have to keep in mind that one won’t override the other, so you will have to manually do that. Here is an example: http://jsfiddle.net/joshnh/qGBjM/

    Also, you can simply write nth-child(3n) and nth-child(2n), both of which will do the same as what you have written above, but with less characters.

    # May 9, 2012 at 10:28 pm

    Thanks. I did figure a way to make it work, but it required re-specifying the 3n+1 in the lower resolutions and adding the margin back in. :-/

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".