For make that columns render content properly “masonry child” (linkMembership) has to have a settings display: inline-block. But with your content it pushing all of it into 2 columns only, probably because there is not much of it.
I was able to fix it by applying fixed height to the “masonry container” along with @samliew advice
If you are not planning to have more content there, then you don’t really need that columns. If there is more content then add it and you will see it will render shadows properly.
Thank you for the advice @sabanna. I’m going to leave that idea for now cause, like you said, there are no more links to add at this moment so maybe if the content grows I will change to masonry grid again.
Hey @sabanna Thank you for this little workaround! I really like it! But please help me solving a mystery issue I’ve got when I set up sibling container to display: inline-block as you mentioned above:
Why is this trick affects the script I’ve got inside the container? I don’t see any related logic connection between making my container inline-block, and this weird behaviour from my tooltips. Also please note I don’t use overflow: hidden anywhere on those containers. If I set up the container to display: block the tooltips works as expected and as they always did, but then the problem with break between the columns arrives…* When you load the site they work flawlessly but after you click on the logo and site reloads again, the weird behaviour starts. Tested with iMac OS Mojave and Windows 10 with different resolutions and with latest Chrome installed on both.
Here is my read-only: https://preview.webflow.com/preview/ribolove?utm_source=ribolove&preview=8fac84003a90f36549ca574ad79e6ca2
and the staging site: removed due to confidential requirements
Any help will be highly appreciated. And sorry for digging so old topic from the ash
*Edit: It turns out that not the display:inline-block nor display:block is the problem/solution but the columns itself… My custom interaction “on-hover-show-hidden-div” broke when I use this column settings… Any fix?
I can see how frustrating and annoying this problem can be. I think I found the reason why this is happening.
The .scope element has a CSS transition applied on HOVER. I think this is messing up with the interactions (that controlled by JavaScript) and causing issues with rendering the tooltip element.
Dear @sabanna, thanks a ton for this solution! Definitely works! Just even if I create another hover interaction for the .scope class it starts act weird again, so I simply quit of this hover animation
Otherwise this is the solution but I simply can’t explain to myself why this happens and what has the column to do with JS interactions?
Anyway thanks again! Really appreciated!
I’ve managed to implement, but I’m having an issue when publishing. I get column gaps AFTER the first item in each column. It doesn’t show in Webflow preview though, only on the published site. It renders fine for IE - LOL. See the pink gaps below:
Ok, I see that your Collection Item has width set to auto. It means that it will only take the width needed to fit the content. If you change width to 100% instead it will always will the gap.