Closed msbtterswrth closed 8 years ago
Thanks for reporting this issue. This looks like an issue with how images are loading. Are you using imagesLoaded?
We are not currently, we're initializing using the following:
var $grid = $('.health-wellness-content .section .items');
$(window).load(function () {
$grid.isotope('destroy');
$grid.isotope({
itemSelector: '.item',
layoutMode: 'masonry'
});
});
How should we implement imageLoaded?
edit: I've tried the following with no luck:
$(window).load(function () {
var $grid = $('.health-wellness-content .section .items').imagesLoaded( function() {
$grid.isotope('destroy');
$grid.isotope({
itemSelector: '.item',
layoutMode: 'masonry'
});
});
});
Try using $(document).ready()
in place of $(window).load()
I'm sorry to hear about the difficulty with Isotope. I'm having trouble identifying what is exactly happening. I appreciate you providing a live link, but I cannot debug a live production site. If you can put together a reduced test case that identifies the issue, I can take a look. See Submitting Issues in the contributing guidelines.
Ugh unfortunately, i'm unable to replicate this in anything other than my drupal environment. I think it has to do with this block of hidden text in each item. Will continue to try to replicate. Thanks for the fast response!
I've attached some screen shots here. There is a HUGE amount of white space after each item only when you first lode in mobile mode, which is one column. if you filter, or resize your screen or load more everything goes back to normal.
What's causing this issue and how do we fix it?
http://snag.gy/xhrK9.jpg - see the styles in the inspector and the white space http://snag.gy/mv77H.jpg - correct display achieved after i resized the viewport.
You can see it in action here - http://rush-health-wellness.centreteksolutions.net/health-wellness/discover-health