0

I need help with a pinterest/masonry layout in magento (i have not done magento part). I am a web designer but am out of my depth with this issue. Basically i have had to change the layout at the last minute after having it working great as a column layout. Now it is showing overlaps and I cannot find the way to fix this.I would really appreciate some help, I am at my wit's end :(

her is the test page with the layout: http://mtl.itaservices.net/kitchenware/toasters

Sometimes it works great and others (particularly when refreshing) is messing up the layout and causing the product areas to overlap or hide.

I'd be eternally grateful and can offer help with any design queries.

some_other_guy
  • 3,364
  • 4
  • 37
  • 55
Ivanna Fernandez
  • 1

1 Answers1

0

I think your issue is that masonry is applied before the product images actually load. It basically determines the box sizes without the images because they are not yet loaded. When the images load the boxes expand, overlapping over other elements.

Masonry works well with the imagesLoaded jquery plugin. Please refer to this article: http://masonry.desandro.com/appendix.html#imagesloaded

Vlad Cazacu
  • 1,520
  • 12
  • 12