I’m a web designer (and do some front end dev sometimes) and have been having issues with a masonry/pinterest layout inside magento. I did not do the magento part but have created the css and HTML for the masonry layout. I’ve been having issues with overlaps (particularly whilst refreshing the page) and wondered if anyone can shed some light on this for me? I am at my wit’s end and would really appreciate some help
The page looks OK to me, to be honest. But I’m also wondering why you are using Masonry here. Masonry is really for neatly stacking variable height elements, but in your case, the boxes are all the same height, meaning that using floats or inline-block would be a much better option here.
I’ve noticed on the sidebar you seem to have a long string of characters which underlap onto the right main content area. You have a max width of 1003px set on .container which restricts the content…yet you also have width: 1200 some px also set. Either way, it’s just not big enough. I’m unsure what those long character strings are even for though? Serves no purpose from my perspective and would be better off being removed.
As for those boxes, each one of them is absolutely positioned and it’s much easier and safer to do floats while doing so. You could have this section
Thanks so much for taking the time to look at the page. The products on that page are all the same height more or less but other products will have different height- that’s the reason I had to do masonry at the client’s request. If i change the height of one on the fly it just goes crazy and starts to overlap, and even at present with all prods same height, when i refresh the page it causes overlaps, so i think there is something wrong with the css.
Thanks so much for your time. I did not do the sidebar part so it would be very useful to see what the strings are so I can tell the developers to remove it. I have no access to the code, just the css but I can tell them what needs changed in the HTML code. Apologies for my ignorance but I would really appreciate if you could tell me which part of the HTML I need to ask them to change.
Thanks again I am so grateful for all your help and insight.
Each of those elements need those inline rules removed. At least the position:absolute. This is pretty sloppy HTML to be honest. After you float each of those boxes, .masonry needs to have the height removed and overflow:hidden set.
