Hi guys. I’m building a collection list with projects on display. I thought maybe a combo of flex and grids would be the best way, but I wonder what would be the best practice to get vertical offset on the different collection items? See my attached screen from Figma.
I do not think this is a good practice when it comes to user friendliness for the client: Dynamic Grid Item Offset
Thanks in advance.
EDIT: Hi! Got help. If anyone else wonders. This is how you do it:
@media only screen and (min-width: 1200px) {
.w-dyn-item:nth-child(even) { margin-top: -140px; }
}
Here is my site Read-Only: https://preview.webflow.com/preview/scenario-web?utm_medium=preview_link&utm_source=designer&utm_content=scenario-web&preview=c326176fedf0ab7284e9580a7e467d72&mode=preview
vincent
August 3, 2020, 3:34pm
2
Perfect! I was going to point you in that direction.
More cool things you can do on Collection Lists with pseudo-classes:
https://sbx.webflow.io/nth-child-targetting-for-coloring-an-inner-element
Hi Vincent. Thank you so much for the link. Bookmarking it for future references
Cheers,
Noethi
February 2, 2021, 7:20am
4
Hi Vincent! I have two collection lists on a page and want only one offset how can I control only this one?
vincent
February 2, 2021, 11:22am
5
You give each list a different class . Like .list-a .list-b
Then your code for the list you want to have an offset in:
.list-a .w-dyn-item:nth-child(even) { margin-top: -140px; }
Because there is a space between .list-a and .w-dyn-item, it means: Target the .w-dyn-item element that has a parent with the .list-a class
