I have a very strange problem in here: [Referral Link Removed]. The first row product items overlapped with the items in the second row.
The masonry items are below the homepage above the footer. As you can see, it looks different with Chrome. In firefox, it looks good.
Here's how it looks in my chrome: http://clip2net.com/s/5LIRko
My jQuery Code is:
jQuery(function($){ var $container = $('.woocommerce ul.products'); $container.masonry({ columnWidth:10, gutterWidth: 15, itemSelector: '.product-category' }); });
Is there any css rule which affects the row output ?
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You've probably seen it in use all over the Internet. Install.
Masonry is a Pinterest Style Dynamic Layout jQuery Plugin. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.
The problem is your images. By the time masonry is called, your images haven't loaded. So it's assuming the height of your elements WITHOUT the height of the image being factored in.
If you refresh your screen after the images are already cached, you'll see that it loads correctly. If you then clear cache and refresh, you'll see they overlap again.
Four Five options:
jQuery(function($){
use jQuery(window).on('load', function(){ var $ = jQuery;
and you'll see the results.You need to initiate Masonry after all images are loaded. If you are using jQuery try:
var $container = $('#container'); // initialize Masonry after all images have loaded $container.imagesLoaded( function() { $container.masonry(); });
for other options see Masonry docs - http://masonry.desandro.com/layout.html#imagesloaded
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With