Streaming live at 10am (PST)

Hiding every 2nd and 3rd items in a collection list

Hi all,

Need a bit of help.
I have a collection list with 30 images. (called 1, 2, 3, etc.)
I want the list ONLY to show images 1, 4, 7, 10, etc.
So I need to hide every 2nd and 3rd image.

I tried with this but it’s not working. (I do not know how to code):

@media (max-width: 991px) { .ci-images:nth-child(2n) {display:none;} .ci-images:nth-child(3n) {display:none;} }

Can somebody please help :slight_smile:


Good job, nth pseudo class is indeed the way to go.

Your first rule will target every other 2 elements, so it breaks already there as it will select 2nd, then 4th… not what you want. Second rule is okay, so you can reuse it and shift it one position. Also let’s use nth-of-type here.

.ci-images:nth-of-type(3n) {display:none} /* Hides the 3rd element, then the 6th, 9th etc */
.ci-images:nth-of-type(3n-1) {display:none} /* Same rule shifted one position so it starts at 2 */

More condensed:

.ci-images:nth-of-type(3n), .ci-images:nth-of-type(3n-1) {display:none} 

BTW a very very minor thing:

Don’t write {display:none;}
Prefer {display:none}
Omit the ; when there is only one property in your rule.

Hey Vincent,

Thanks a lot again again (my reliable code-pusher :slight_smile: )

I manage to get my masonry grid to list images from left to right instead of from top to bottom in my clunky way - but hey, it works…