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!
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.
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!
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.
