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;

    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) {
    width: 960px;

    width: 234px;

    header h1{
    background-position: 0px -120px;
    height: 74px;
    width: 232px;
    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:

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