Elements stacking vertically instead of horizontally using 'display: none'

[UXMike]

Take a look at the problem here: https://influx.webflow.io/projects

Click the 'Branding' filter and you'll see the elements have a 'top' value added instead of a 'left'. I've tried all the fixes I can find and I'm 4 hours deep into trying to solve this now.

HELP!

[JaimeeThrive]

Same problem did you ever solve?

[UXMike]

I sort of solved it, here's the code for you. It was a combination of adding inline style to the Grid Sizer and using Masonry's reloadItems and layout functions to force it to calculate the sizing correctly. I think it's still an issue on some devices but nothing I can do without the input from someone with more advanced knowledge than I have. I built the site in Webflow so some of this might be overkill for you if you're developing directly in your IDE. Hope you get it sorted though 👍

$(window).on("load", function() {
  // Create custom classes for projects
  $('.categories-list div:not(.w-condition-invisible)').each(function() {
    let categoryText = $(this).text();
    $(this).parent().parent().addClass(categoryText);
  });

  var $container = $('.grid');

  if ($(window).width() > 991) {
    // Add sizer
    $container.append('<div class="grid-sizer" style="width: 33.33%"></div>');

    // Masonry
    $container.imagesLoaded( function() {
      $container.masonry({
        itemSelector: ".grid-item",
        columnWidth: ".grid-sizer",
        percentPosition: true
      });
    });
    $container.masonry('reloadItems');
    $container.masonry('layout');

    // Filter categories
    $('.category-btn').on('click', function() {
      let category = $(this).attr('data-filter');
      if (category != 'All') {
        $('.grid-item').hide();
        $('.grid-item.' + category.toLowerCase()).show();
      } else {
        $('.grid-item').show();
      }
      $('.category-btn').removeClass('active');
      $(this).addClass('active');
      $('.ap-heading').text(category + ' Projects');
      $container.masonry('layout');
    });
  }
});

[JaimeeThrive]

Thank you I will give this a go!