CMS + nth child styling

Hello!
I’ve tried to style the nth child of a data collection with custom code (as per Timothy Ricks) but can’t succeed.
I’d like to change the order of my 2 divs in my grid in order to alternate left and right for the picture and text block.
Could you please help me figure out what isn’t working?
Here is what I did:



Here is my site Read-Only: Webflow - Mel's Talk

Webflow converts all class names to lowercase (with spaces turned into dashes), so you’ll want to make sure you’re referencing the classes in lowercase as well:

<style>
.teamitems:nth-child(even) .biowrapper {order: -99999;}
.teamitems:nth-child(odd) .biowrapper {order: 99999;}
</style>

One thing to note, the HTML Embed element gets duplicated when it’s inside of the Collection Item so (while it will technically work with your setup) I’d recommend pulling that code outside of the list and somewhere around the top of the Navigator :+1:

1 Like

@mikeyevin Why making my Saturday night that good? Thank you very much

1 Like