Streaming live at 10am (PST)

CMS list with different layout

Hello lovely community!

I’m on a design quest of making this layout on a section of my homepage:

The tricky part is that I want the cards to be a part of a collection list, by now I designed the cards in a collection list grid ( You can check my read only link) tut cant find the way to make that custom “space” in the second and third column. I saw some custom code that works with flexbox (nth-child) butI’m not sure how to make it work with grid or if its another way to acomplish this layout with a collection list!

All kind help is appreciated!

Cheers!


Here is my site Read-Only: LINK

Look here :

https://sbx.webflow.io/nth-child-targetting-for-coloring-an-inner-element

You’ll learn how to target elements and add custom code to style Collection Items of the same list differently. Check the last example, it’s a bit what you’re after.

1 Like

Thanks for the help Vincent! I’m diving into and I think I managed to add the spacing by just adding a top margin in the second and third child! Thanks so much fur the help, I’m rn viewing all the things you have on that page! Really helpful!

Oh yes, pseudo classes and pseudo elements are very powerful, and a godsend when it comes to Collection Lists. I’m sure we’ll be able to use them without custom code one day soon.

Hi Vincent! Hope you´re doing great man! I’m having another issue with this same site and I thought you can maybe help me out again! hahaha!

I’m having a weird jump when scrolling in mobile! I’m using safari on an iphone Xr and when the safari top and bottom bars hide at first scroll, one of my page elements just jumps to another position, I think is because it has VH for the size and the actual VH changes when the safari elements shrink down!

Is there any way to fix that? Can’t find a solution anywhere!

Here is the published version: https://yocultivo.webflow.io/
Here is my site Read-Only: LINK

Not an easy issue. I wrote about a fix here, hope that will help you.

https://sbx.webflow.io/100vh-viewport-safari-fix

1 Like

Thanks a lot mate! It did not work for my issue! But I just changed the position of my image so it wont be changed by the VH and it works just fine!

Those floating viewport values on smartphones are pure hell to work with. It’s difficult to craft a solid experience especially when you have an interactive piece to show.

1 Like