Does nth:child not work responsively?

[iagainsti]

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;

}



}

[joshuanhibbert]

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.

[iagainsti]

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. :-/

[Author]

Posts