Streaming live at 10am (PST)

Styling Columns with Webflow CMS


#1

Hey there!

I have a CMS collection of team members (around 12 or so) and I want to present them in two columns. So far so good, but I want the right column to be a bit offset from the left. I think I tried every option by now, maybe someone can help? The screenshot below illustrates my problem: left is what Webflow does, right is what I’m trying to accomplish. Maybe custom code? Maybe a creative work around that is CMS friendly?

Greetings
Marty


#2

The easiest way here is to use custom CSS to target every other element.

Using .collection-list-class:nth-child(odd) you’re affecting all the odd cells.

Try:

<style>
.collection-list-class:nth-child(odd) {top:40px}
</style>

#3

Thank you Vincent. This was the hint I needed. It wasn’t quite as simple as this because of the row wrapping flexbox creates.

Based on your input my solution now looks like this:

.collection-name:nth-child(odd) {margin-top:-300px;}
.collection-name:nth-child(1) {margin-top:0px;}
.collection-name:nth-child(2) {margin-top:300px;}
.collection-name:nth-last-child(1):nth-child(odd) {margin-top:-150px;}

Thanks again :slight_smile:


#4

Haha, great, good job :slight_smile: