Isotope Lazy Loading - resize browser window

[lori698]

Ive implemented isotope as follows

var $grid = $('#NewsArticles').isotope({
    itemSelector: 'none',
    masonry: {
        columnWidth: '.Newsgrid__col-sizer',
        gutter: '.Newsgrid__gutter-sizer',
    },
    percentPosition: true,
    stagger: 30,
    visibleStyle: { transform: 'translateY(0)', opacity: 1 },
    hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});

var iso = $grid.data('isotope');

$grid.imagesLoaded(function () {
    $grid.removeClass('are-images-unloaded');
    $grid.isotope('option', { itemSelector: '.Newsgrid__item' });
    var $items = $grid.find('.Newsgrid__item');
    $grid.isotope('appended', $items);
    $grid.isotope('layout');
});

$grid.infiniteScroll({
    path: '#NextArticles',
    append: '#NewsArticle',
    outlayer: iso
});

css is as follows

.Newsgrid__gutter-sizer { width: 0.5%; }
.Newsgrid__col-sizer,
.Newsgrid__item { width: 24.5%;  }

@media (min-width: 960px) and (max-width: 1200px) {
    .Newsgrid__col-sizer,
    .Newsgrid__item { width: 24.5%;  }
}

@media (min-width: 768px) and (max-width: 959px) {
    .Newsgrid__col-sizer,
    .Newsgrid__item { width: 24.5%;  }
}

@media (min-width: 600px) and (max-width: 767px) {
    .Newsgrid__col-sizer,
    .Newsgrid__item { width: 24.5%;  }
}

@media (min-width: 480px) and (max-width: 599px) {
    .Newsgrid__col-sizer,
    .Newsgrid__item { width: 49.5%;  }
}

@media (min-width: 320px) and (max-width: 479px) {
    .Newsgrid__col-sizer,
    .Newsgrid__item { width: 49.5%;  }
}

@media (max-width: 319px) {
    .Newsgrid__col-sizer,
    .Newsgrid__item { width: 100%; }
}

However, If I close the browser down so that the item goes to two cols and then resize the first page of items doesn't resize correctly. What's the best way to force redrawing of the grid on browser resize - should I do this different way?

[thesublimeobject]

@lori698 — If you don't mind, please provide a Codepen as a test case per the contributing guidelines. Sometimes I can help debug from just code snippets like this, but I would really need to see an example for this since I know that when done correctly, Isotope doesn't have any issue correctly rendering responsive layouts. There may be something simple wrong here, but I'm not sure I could pick it out from static code. Thanks!

[lori698]

@thesublimeobject can I pm you instead? I had emailed an example referencing the above id to the contact email address. contact@desandro.com and yo@metafizzy.co. Any help would be much appreciated.

[thesublimeobject]

@lori698 — Sorry if you did not get a response from either of those emails. I'm not really sure what the protocol on that is, but realistically most issues should run through here; I try to handle most of the issues for desandro.

Is there a specific reason that you need to DM me directly? If there is a case where you can't publicly share code for some reason, I suppose I can perhaps consider a DM situation, but if not, the issues should really stay here. Not only because that solving issues publicly can help others in the future, but also because that making exceptions in cases that do not require it would potentially open me up to providing a personal debugging/help-channel service to anyone and everyone—and that's not really what these issues are meant to be.