Styling cms items differently within the same grid/list

Hey all! Does anyone know how I could design only the 1st item of the cms list to have different styling than the remainder of the items (all in the same list instance)? I currently have it set up as 2 instances of the same list, which are styled differently. And the thing is that the first item needs to span all grid columns.

I’ve been thinking if it’s possible using finsweet class adder. I haven’t had success styling the “first” item of the cms css selector either. Any help is greatly appreciated!


Here is my public share link: LINK
(how to access public share link)

hi @drungsea using two identical collection can be solution but this design for one CMS collection is possible create with help of custom CSS and JS. I have never tried Finsweet tools so I can’t tell.

Yes, I believe I can target the ‘first’ or nth child of the list with some custom code, but I can’t seem to get it working. Any chance you can point me in the right direction?

Edit: I followed this tutorial, suggested by someone in the facebook group!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.