Problems with :nth-child selector

[donboe]

On this page I use the :nth-child selector the following way:

.product_grid {
	margin-top: 2.5em;
	list-style: none;
	overflow: hidden;
	word-spacing: -1em; 
}

.product_grid li {
	width: 27%;
	margin: 0 6.5% 2em 0;
	padding: 1% !important;
	display: inline-block;
	overflow: hidden;
	position: relative;
	background: #E6E6E6;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.product_grid li:nth-child(3n+3) {
	margin: 0 0 2em;	
}

I have a media query for devices smaller than 1280px:

.product_grid li {
	width: 45%;
	margin: 0 8% 2em 0; 	
}
	

.product_grid li:nth-child(2n+2) {
	margin: 0 0 2em;	
}

But as you will see when you make the screen smaller things get messed up. The first row is fine, the second isn’t and the third one is fine. No idea what i am doing wrong? It is as if the :nth-child(3n+3) for devices above 1280px is still active.

Can someone please point me in the right direction.

[DaveMaxwell]

@donboe

It is as if the :nth-child(3n+3) for devices above 1280px is still active.

Unless that first selector is in a media query specifically for devices over 1280px, it IS still active. Just because you don’t reference it in the smaller media query doesn’t mean it’s not still applied - in fact, it’s GUARANTEED to be applied until it’s specifically overridden.

[donboe]

Hi Dave. Thanks for the reaction. So basically I need to have the values for the devices above 1280px in a media query as well.

[DaveMaxwell]

Or just add this to your smaller media query, @donboe

.product_grid li:nth-child(3n+3) {
	margin: 0 6.5% 2em 0;	
}

[donboe]

Hi Dave. Again thanks for the reaction! Now you’re confusing me a bit: confused: I just tried that and now the first two rows are ok, but the third is split in two separate rows

[DaveMaxwell]

Can you upload the css to your page? I’m not seeing that, but I’m not seeing the override either, so I’m obviously looking at the older version.

[donboe]

Hi Dave. I just uploaded them again. You need to have a look at website.css and responsive.css

Thank you for looking

[SamA74]

@DaveMaxwell

.product_grid li:nth-child(3n+3) {
	margin: 0 6.5% 2em 0;	
}

Be sure to add that before:-

@donboe

.product_grid li:nth-child(2n+2) {
	margin: 0 0 2em;	
}

Or it may overwrite some of it.

[DaveMaxwell]

That’s what it is - it’s applying the 3n+3 instead of the 2n+2 because of how you placed the 3n+3 in the responsive.css. Put the 3n+3 first, and it’ll be correct.

(Thanks @SamA74 - I could see what was happening, but the obvious stick hadn’t hit me hard enough yet to figure out why)

[donboe]

Hi Dave and Sam. Thank you both for the replies. That is working great. Thank you both for the input