Problem on smartphone displaying results with CMS filter using Macy.js or Refokus Masonry Library

Hi everyone !

I have a collection list page with a masonry grid for display projects. Items are filtered by Finsweet Attributes with radio buttons.

If I use Refokus Masonry Library, i have a problem of images loading when i click on a filter nav item (Desktop + Smartphone).

If I use Macy.js (actually set. up on the site), i have a problem of loading, but only on smartphone (it create a big space between filters and collection list).

Link of a video capture on smartphone : Dropbox - Vertical_film_sm_pb.mp4 - Simplify your life

Is someone can help me ? :pray:

Here the read-only link : Webflow - Vertical Films

Here the pre-prod of the website : Les projets de Vertical Films

Thanks !


Could you moving the CMS Filter callback to the </body> section of the page’s custom code? Let me know if this works!

Hello @Support-Luis,

Do you speak about the script of the Finsweet Attributes CMS Filters ?

No, the CMS Filter script should go on the <head>

This is the callback

window.fsAttributes = window.fsAttributes || [];
  (filterInstances) => {
  	const options = {
      container: "#masonry",
      margin: 16,
      columns: 3,
      breakAt: {
        991: 3,
        767: 2,
        479: 1
    let macyInstance = Macy(options);

    const items = document.querySelectorAll(".collection-proj");
    for (let item of items) {

    // The callback passes a `filterInstances` array with all the `CMSFilters` instances on the page.
    const [filterInstance] = filterInstances;

		// The `renderitems` event runs whenever the list renders items after filtering.
    filterInstance.listInstance.on("renderitems", (renderedItems) => {
      macyInstance = Macy(options);


Thanks @Support-Luis,

It works ! But only if i put the scripts + the callback on the </body> :smiling_face:

Great to hear! :muscle:

And yes any additional callback should be added to the </body>

1 Like

Hi @Support-Luis,

I’m sorry but my customer tell me that the problem is not resolved on IOS. Is it possible that there are compatibility problems?

Hey! Could it be an issue with the initializing of Macy on IOS? Could you look into potential solutions within the library docs?

Hey @Support-Luis, i finally use a different script, and all works fine now. Thanks :+1:

1 Like I am having the same issue right now - I see its working on your page now, how did you solve it?