Highlighted

Masonry is overlapping when browser size is smaller than 1200 px

Explorer ,
May 02, 2018

Copy link to clipboard

Copied

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.

Views

331

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Masonry is overlapping when browser size is smaller than 1200 px

Explorer ,
May 02, 2018

Copy link to clipboard

Copied

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.

Views

332

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 02, 2018 0
May 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
Explorer ,
May 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
LEGEND ,
May 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
Explorer ,
May 10, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 0
LEGEND ,
May 11, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2018 0
Adobe Community Professional ,
May 12, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2018 1
Most Valuable Participant ,
May 12, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 12, 2018 0