caleb1
February 4, 2025, 3:07am
1
Hi, I’m having an issue with a masonry grid when using Finsweet combine.
I have the functionality of macy.js and the CMS combine working okay, however there is a huge gap on the page that shouldn’t be there. This gap goes away when the page is resized.
I’ve filmed a quick loom showing what I mean: https://www.loom.com/share/e6a32fa89c9543e190969a79b8867c2a?sid=65f459dd-8b11-4390-9f1f-902e094ff134
Also here is the webflow link: https://alroe-constructions.webflow.io/portfolio
Can someone please help me with this?
Hey @caleb1 ! Apologies for the delay, I see you have written some custom code, however, I believe it could be simplified for easier maintenance.
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const [filterInstance] = filterInstances;
const { listInstance } = filterInstance;
macyInstance = Macy({
container: '#masonry',
margin: 16,
columns: 3,
waitForImages: true,
breakAt: {
991: 2,
767: 2,
479: 1,
},
});
listInstance.on('renderitems', (renderedItems) => {
macyInstance.runOnImageLoad(function () {
macyInstance.recalculate(true);
}, true);
});
},
]);
</script>
This should keep the masonry layout properly styled after filtering, window resizing, and such.