Items get correctly displayed on 3 columns when using one filter, but get stacked on a single column if using a different filter

[vankishdelfuturo]

Go to the portfolio section of www.vankish.com

When using the filters ALL and GRAPHICS, it works properly. When using the filter VIDEO, the items will only use one column.

Makes no sense. I have tried everything. I have read all the docs and lots of similar issues posted here, but still nothing.

Here's the relevant .js

  // Event listener for handling portfolio filtering and initializing Isotope and Masonry
  window.addEventListener('load', () => {
    let portfolioContainer = select('.portfolio-container');
    if (portfolioContainer) {
      let portfolioIsotope = new Isotope(portfolioContainer, {
        itemSelector: '.portfolio-item',
        layoutMode: 'fitRows'
      });

      let portfolioFilters = select('#portfolio-filters li', true);

      var masonry = new Masonry(portfolioContainer, {
        itemSelector: '.portfolio-item',
        columnWidth: '.portfolio-item',
        percentPosition: true
      });

      // Event listener for portfolio filter clicks
      on('click', '#portfolio-filters li', function(e) {
        e.preventDefault();
        portfolioFilters.forEach(function(el) {
          el.classList.remove('filter-active');
        });
        this.classList.add('filter-active');

        portfolioIsotope.arrange({
          filter: this.getAttribute('data-filter')
        });

        // After updating the filter, reload and layout Masonry
        setTimeout(function() {
          masonry.reloadItems();
          masonry.layout();
        }, 500);
      }, true);
    }
  });

[thesublimeobject]

@vankishdelfuturo — i just took a look at the portfolio and it seems like the filters are no longer present: do you still need assistance with this?

[vankishdelfuturo]

Yes, i still do need the help! I removed the filters from my portfolio because i was unable to make them work properly. I'll share the code with you if you are down to check it out

What i did find out tho is this:

• The portfolio items come from a table in my database
• The first portfolio item in the table (Let's call it 'Margiela') has the category "GRAPHICS"
• When GRAPHICS filter is active, 3 columns display correctly. When VIDEO filter is active, goes back to 1 column

Conclusion:

• As long as "Margiela" is being displayed in the active filter, masonry effect will work properly
• If "Margiela" is being hidden in the active filter, the display will stack on the first column

I know they say something regarding this first item problem on the Isotope FAQs. I tried that solution and it still didn't work

[thesublimeobject]

@vankishdelfuturo — yes please share your code, if possible. it will make it a bit easier to discuss (still might be difficult without a direct example of what's happening, but i can try).