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

CMS - Changing Picture orientation
#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>
1 Like
#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:

1 Like
#4

Haha, great, good job :slight_smile:

1 Like
#5

Hey Vincent,

Can you please help me with this? Im trying to accomplish this and I copied and pasted the code in in the “before body tag” and it is not working =[
I tried using the exact same code, then I tried replacing the class name with the class name of my collection list.

Here is my read-only link:
https://preview.webflow.com/preview/anthonymasportfoliofinal?utm_source=anthonymasportfoliofinal&preview=107d1897c43f5122e2370a0e1fc04517

On the blog page I am trying to off set the right row of blog posts so it looks like Martys example in the picture above.

Any help is greatly appreciated!!!