Masonry Galleries become one vertical column

Any ideas on this? I’ve seen other people on here experiencing the same issue. The gallery in question is here https://bit.ly/2sugmr3 , but we’ve got dozens on our site that all run into the same problem.

• This reply was modified 7 years, 8 months ago by ccompton.

Hi – I had a look at your page and it seems ok at the moment.

Looking at your screenshot – and your comment about it correcting after you clear CSS optimizations, it seems the issue is caused by your CSS paths changing. This usually happens when the plugin folder changes or your site url changes. Have you done either recently?

We haven’t done either. The issue has been intermittent, so it’s a challenge to ID when it’s going to happen.

when it does happen, can you open dev tools in chrome to see what the URL is that is throwing a 404. That will give me an idea what is going on. Unfortunately, I cannot reproduce this issue on my side.

Can you look at my page:

https://www.bonapafo.com/nowa-galeria/

(architektura i krajobraz, rodzinna, inna)

First gallery (Biznesowa) it’s ok.

Page was moved from one hosting to another but plugin was installed on new server only.

Hi @michalgregorczyk,

Your issue is different. Your problem is caused by having your gallery in another tab, which is not visible when the masonry gallery is created. Because it is not visible at the time of creation, the masonry plugin “thinks” the image dimensions are zero, which causes the layout problem you are seeing.

This can be proven by clicking on the tab, and then pasting the code into dev Tools in chrome: jQuery('#foogallery-gallery-773').masonry()

You will see that the gallery does a relayout and it looks fine.

A way to get around this is to hook into the tab plugin code you are using and run some code similar to this when the tab is clicked : jQuery('.foogallery-masonry:visible').masonry()

I am not sure that is possible with the tab plugin you are using though