Forums

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

treehouse : what would you like to learn today?

Forums

Does nth:child not work responsively?