Hello! I need to create a section that contains a collection list with 5 collection items that are displayed in the same raw. The third item should be bigger than the others. How do I achieve that?
Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.
The easiest way to do this would be by using the “:nth-child()” pseudo-class to style the 3rd item of your collection list, I believe Webflow only currently supports first, last, even and odd styling natively, so you’d have to use some custom code to edit only the third child, in this case, something along the lines of the code below should work.
You’d then just have to play around with the actual styling until you get something you like! (using a html embed element is great while you’re experimenting as you can see it update in the preview).
<style>
.latest-news_collection-item:nth-child(3){
// styling goes in here
}
</style>
I’ve tried it and actually, this might work. The only thing is that I applied the size to the image so when I try to style the first child of the grid I can only change the style of the “collection item” element and not the size of the image.
Yes in those situations, I usually just make the image scale with the container, e.g. 100% 100% and then use object-fit or a background-image approach to protect aspect ratio.