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