Masonry issue

[Adri Oosterwijk]

Hi Andy,

On a site I have developed (openwater.nl) is a travelblog (reisverhalen in Dutch) clicking on it shows the archive for this blog. However it is a bit on top of eachother. It looks like the masonry is failing a bit. What to be done?

[Andy]

Can you try it without the slide in animation effects activated and see if the articles still overlap.

[Adri Oosterwijk]

Hi Andy,

I tried it and it is still overlapping in some instances. See screenshot.

BTW I did noticed that I post this question in Trusted but in fact it has to be in Trusted Pro… sorry.

[Adri Oosterwijk]

It is happening to another site also.

[Andy]

Hi Adri,

It all looks OK when I view your sites in various different browsers.

Could you please let me know what browser and OS you are using?
This may help us to narrow down the problem.
Many thanks.

[Adri Oosterwijk]

Hi Andy,

I’m working on a MacBook Pro.

It surfaces in Chrome, Safari, Firefox and Opera.

It also happens on a different macBook Pro.
Reloading solves it for that page but going to a next archive page brings the problem back.

I can remember in the past when I was using de masonry scripts from DeSandro (https://masonry.desandro.com/) I had to load an eventie.js and an imagesLoaded.js script to get rid of this problem. I also do recall that you helped me before with a masonry issue for woocommerce: https://uxlthemes.com/forums/topic/masonry-sometimes-messed-up/

Can it be related?

On my iPad I don’t see it. Looks like it is macOs related or are you on a mac as well?

Adri

[Andy]

Thank you for providing the information.

When I view your site on Mac or Windows and with differant browsers, the masonry looks OK and does not overlap.

Could you temporarily disable the FAQ plugin to see if it is conflicting?

Also in your child theme you are loading the parent stylesheets like so:

@import url("../trusted-pro/style.css");
@import url('../trusted-pro/css/header-1024.css');

Could you remove or comment out these two lines and see if that makes any difference. You do not need to load the parent stylesheets like this, as they are already loaded by the fact that the parent theme is installed and your code is making them load twice.

[Adri Oosterwijk]

Hi Andy,

I tried your suggestions but nothing changed. Not on bot my macs with different browsers.

However suddenly something hits me.
It only occurs when a featured image is involved. When no featured image is set (and therefor no image is displayed on the archive page) the items behave perfect.

Could it have something to do with loading times of the images? As we live a mobile life we often have not a very fast connection to the internet. See screenshots. The first is the top of the page were images are used, the second one is near the bottom of the page and here are no images used.

I hope this input is useful.

Adri

[Andy]

Hi Adri,

Please update to 1.2.2 and hopefully the masonry layout issues should now be fixed.

[Adri Oosterwijk]

Hi Andy,

I updated Trusted-Pro to 1.2.2 and I’m sorry to say the masonry issue still excists. see screenshot

[Andy]

The update makes sure to only add the masonry positioning after the images have loaded, so it should eliminate this issue.

Have you made sure to logout from your WP admin and clear your browser cache?

[Adri Oosterwijk]

Hi Andy,

It is solved indeed, it wasn’t my browsers cache or something here. I suspect the site had to be propagated again to the CDN as I remembered using that feature at my hosting account. Is that possible? In that case I was to hasty to respond for which I apologize.

I checked all 47 pages of archive pages and no one fails.

Again a big thumbs up for your outstanding support.

[Andy]

Yes the CDN thing sounds entirely plausible. Glad to hear no issues with the masonry layout and thank you for letting us know that it is all working properly now.

[Author]

Posts