Hey!
I have a CMS collection with 2 divs acting as 2 seperate columns next to eachother. 1 is made up of text and the other of images. The issue is the text from text-div is inheriting the height from the photo-div (400px) creating massive space between the lines of text. I need these to be part of the same collection because the text field is reference filter that connects the images - otherwise I would just have 2 seperate collections.
I’ve tried everything I can think of with postion settings absolute, fixed, sticky etc but nothing allows the text to stack normally without inheriting height from the photo-div.
As you’ll see in read only I have a 3 total columns on page made up of 2 seperate collections. Left collection being the filers, and right collection (2 columns) being the projects (images and reference).
I’ve attached a screenshot of my figma design showing the desired effect, and screenshot of current state of undesired effect in Webflow. Essentially I want: click on filter ‘product’ and all ‘product’ projects (name & images) show up on right 2 columns without inheriting height. In an ideal world the 2 columns on right also scroll independently but I can live without that if not possible.
I hope this makes sense. Desperate to find a solution. My first time posting on here and so fingers crossed I can find some answers. Thanks!
Instead of trying to wrangle the content with a single Collection List Wrapper to create the 2nd and 3rd column, I’d suggest using two — one for each column — that reference the same Projects collection:
With the additional Collection List Wrapper you can much more easily control how each column displays the content while still utilizing the same Projects source collection.
After struggling through it I came to the same conclusion - that is having 3 individual collections (1 for each column) and pulling the necessary cms field for each. I’ve got that part done.
Now the issue is having column 2 & 3 synced. Column 1 is a filter. So when clicking ‘product’ and ‘bench 01’ text populates in column 2, the image in column 3 should populate at the same time since it’s part of that filter-reference.
I’ve gotten as far as initiating the filter and column 1 & 2 are working as they should - using finsweet cms filter. I thought for column 3 I could simply duplicate the components with the same attributes and both columns would populate as they should (based on filter). But unfortunately I was wrong…
Would ‘nesting’ collections maybe be the answer…? I’m not familiar with nesting collections and digging in now but it’s a little confusing…
Really appreciate your help. If there’s a way you can get me over this hump i’d be ever so grateful before I go crazy…ha
Thank you so much.
My updated read-only link. I created a second page ‘projects’ for this :
I think I figured it out! I was missing the attribute on the 3rd columns collection list…
Not out of the woods yet but fingers crossed! Again, really appreciate the msg’s thus far. Not being a developer, it can really feel like you’re alone trying to climb a mountain with no path.
