Masonry is overlapping when browser size is smaller than 1200 px

[mi5studio]

Dear,

I inserted a Masonry inside Muse. It is working ok but when the browser window is smaller than 1200 px the images are overlapping. I think this must be something with the breaking points, I'm not sure. Hope someone can help me. When I make a resize of the browser the images goes ok. Here is the  link to the site.http://mi5studio.com/mi5studio/index.php#projects

thanks in advance.

[ankushr40215001]

Hey Grupo,

Are you talking about that image grid placed there?

I am not sure what a masonry is but if it is the above grid then it works fine at my end.

Regards,

Ankush

[mi5studio]

Yes Ankushr, please resize your browser to approximately 500 or 600 px and refresh and you will see that the content disappear, then if you resize it appears. Very wired.

[Günter Heißenbüttel]

This is a 3rd party widget. You should contact the vendor.

[mi5studio]

I tested this Isotope.js in an empty html and it works properly. The problem is when I add this code to muse.

If the window of the browser is less than 1200 px the images overlap each other and one of my breakpoints is in 1200 px so Im pretty sure that the problem is with maybe some js from muse. If I refresh the web or resize the window, the elements accommodate. The strange thing is that in the smartphone this does not happens.

I uploade in this new https://goo.gl/yjck49

[Günter Heißenbüttel]

Obvioulsy, the imported code conflicts with Muse‘s code. This is not necessarily a Muse issue. This is a commen öroblem, if you don‘t have complete control about „native“ and imported code.

[Nancy OShea]

I think it's fair to say that Masonry Grid is not going to work well in Muse layouts.  Mainly because you have zero control over the source code Muse generates.   You might be able to put your masonry grid on a separate page in Dreamweaver or other code editor.  Then use an <iframe> to call that page into Muse. 

Below is a responsive Masonry Grid built with Bootstrap 4 & Cards.  Best of all, you do not need to refresh browser after resizing.   View source to see the code.

Bootstrap 4 Masonry Grid

[Ussnorway]

it is possible to get masonry working in Muse but the load order can be tricky and if you don't understand code then I agree with Nancy that an iframe from Dreamweaver (or some other 3rd party html maker) is the best workaround

p.s, Google does not allow redirrects and has banned \ removed your link