Equal space in masonry grid

[WebThinker]

Hello,

please have a look at the following page:
(Removed link)

If you soft and hard refresh a couple of times you will see that sometimes the gap between the articles is everywhere the same and sometimes it’s not, compare with these two screenshots:

Good
(Removed image)

Bad
(Removed image)

How can i solve the problem?

Thanks and regards,
Alex

[christian]

Hey Alex,

I do see the issue but I’m sorry but I could not determine the cause as there’s no indicator that could lead me. The grid recalculates the position of the items when you resize the browser though so if you’re looking for a quick fix, the JS code below will trigger a window resize after 1.5 seconds. You can add that in Theme Options > JS.

I’d suggest this as a last resort though or if we could really not find what’s causing the issue. With that said, please perform the troubleshooting steps below the code.

jQuery(function($) {
    setTimeout(function() {
        $(window).trigger('resize');
    }, 1500);
});

1. Ensure everything is up to date according to our version compatibility list at https://theme.co/docs/version-compatibility. Please follow the best practices when updating your theme and plugins. See https://theme.co/docs/product-updates for more details.

2. If you’re using a caching or optimization plugins, clear all caches then temporarily deactivate your caching plugin and other optimization plugins. Please then clear your browser’s cache.

3. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

4. If you’re using a child theme, switch to the parent theme.

5. If you have custom CSS and Javascript codes anywhere in your site, please temporarily remove all of them.

6. Try reducing the grid item display to like 6 per page. If this fixes the issue, gradually increase the grid items until the issue comes back. This could mean that the grid’s item position calculation is not in sync with the loading of all the items. Probably, there’s something delaying the load of images like a lazy-loading feature which could only come from a 3rd party plugin or script.

If none of that helps, please give us WordPress Admin access in a Secure Note so we could check what else is causing that.

Thanks.

[WebThinker]

Hello Christian,

thanks for the quick response - the JS-solution works for us!

Regards,
Alex

[friech]

You’re most welcome,

Cheers!