Streaming live at 10am (PST)

Using first item to change the grid layout of a CMS collection item

Hello Web-flowers,

I’m having trouble with something that seems like it should be super straightforward:

I’ve created a grid layout from collection items; 5 items in a 2 column grid.
I want the first item in the collection to span 2 columns, all other items should just span 1 column.
Should look something like this:

I assumed I would now be able to use the first child selector for the collection grid to just change the first item to span 2 column. But for some reason, doing this just affects all items in the collection, so everything spans 2 columns.

I’ve also tried to add the following custom code in an embed to get achieve this but that is also not working:

.grid-item .w-dyn-item: first-child {
grid-column-start: span 1;
grid-column-end: span 2;
}

This feels odd to me, surely this is just the kind of thing the first child selector is for, am I just doing something wrong?


Here is my site Read-Only: LINK