Masonry.js grid glitching

Design help General
1

Dear Friends,

I have implemented this masonry.js grid on my site:
http://thinking-twins.webflow.io/masonry-layout#How-To

But unfortunately, it’s glitching – all the images are appearing on top of each another in a little bundle.
Anyone have any insights?

Thanks in anticipation,
Lizzie

fine:

looks%20fine
looks%20fine1692×1066 820 KB

not fine:
doesn't%20look%20fine
doesn't%20look%20fine1688×962 245 KB

Here is my site Read-Only: https://preview.webflow.com/preview/chris-frazer-smith?utm_medium=preview_link&utm_source=designer&utm_content=chris-frazer-smith&preview=7bd720226e57680b6ee544f02fd47ab9&pageId=5d036b0eeb9664da01772687&itemId=5d28c361d77a1e5fe0aa1294&mode=preview
(how to share your site Read-Only link)

2

Hey so has anyone been able to have any thoughts on this? I’m like really stuck over here :grimacing:

3

Add live URL (The custom code works only under publish url) + Page name + Where you put the custom code? (Looks empty under page setting for film)

4

This is the Page siton! https://chris-frazer-smith.webflow.io/

Inspect the page and you’ll see that there’s more than 1 page in there

5

Again - in this page no masonry (One image in the center).
Please be more clear.

1 Like
6

That’s what got me confused as well. I didn’t see any custom code for Masonry in what seems to be any of the pages.

1 Like
7

hi! If you check out any of the pages under photography, there are 2 tabs, one with a main image and one with thumbnails. The thumbnails is where the masonry grid is :slight_smile:

http://www.chrisfrazersmith.com/projects/winter-guns

8

Well, when you resize the page after clicking on show thumbs, things work…

I’ll have a look at it after lunch.

9

Yeah I know, weird right? Thank you so much for taking a look!!!
Lizzie

10

Here you go: Webflow - tore-masonry

Just copy this. Take the css and the script from ‘Home’ and name the DIV blocks like here. That should work. Add padding 1.5% to your image, and then you should be all set.

1 Like
11

you may consider creating a masonary grid without JS/Jquery… all you have to do is add “Text Columns” to your “gallery items” and then set them to 100% width - you will get a perfect masonry grid without JS and all portraight/landscape photos will look as they should - and you can control all of it…

12

Thanks for this @ToreSBentsen ! Unfortunately once implemented, the whole width was very narrow, and the masonry stacking wasn’t working… I could have been doing it all wrong, but unfortunately short of time, so I went for @IVG’s solution.
Thank you friends for you input and help, so so much appreciated.
Lizzie