Different size for just one collection item inside a collection list

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?

(Not sure I can share the read-only link)

Here is what I want to achieve:



Here is my site Read-Only: LINK
(how to share your site Read-Only link)

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.

Also share a published URL/URI as well.

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>

If you are wanting designer control for styling those items differently, I’d recommend that you “hack” your list arrangement.

  • Use two collection lists
  • #1 is limited to 2 items starting at 1
  • #2 is limited to 3 items starting at 3
  • Arrange and size them adjacently, I’d use flexboxes for the layout
  • In the second list, apply your custom larger styling to the “first item” state
1 Like

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.

Do you apply the background image on the collection-item element?

If you want to. i usually put a DIV inside and fit it 100% 100%.

1 Like