CODEWITHSUNDEEP
javascriptjquerycssjquery-masonry
Jed
Jed

Reputation: 1733

Masonry JS - How to center grid elements in the second row

I'm working with this site: http://genesis.ecoverbuddy.com/

I used masonry for the ecommerce product categories for the responsive feature. Now, I need to make the second row to float in center.

Q: Whats the best way to implement it? It would be nice if the responsive feature is maintained in smaller screen sizes.

Here is my jquery code: 

jQuery(window).on('load', function(){ 
var $ = jQuery;
/*  Masonry */
var $container = $('.woo-cat ul.products');
// initialize
    $container.masonry({
          columnWidth:10, 
          itemSelector: '.product-category', 
          isAnimated: true,
          isFitWidth: true
    });
$container.masonry('reloadItems'); 
});

Upvotes: 0

Views: 1800

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55623

Best way to implement it? Don't use masonry at all - just use CSS. Your lucky because all your images are 300x300. Masonry is usually used to best arrange items into a grid when they are various sizes and traditionally floating arranges them awkwardly.

A simple example of being responsive and centered is here:

http://jsfiddle.net/aF7tP/

* { margin:0; padding:0; }
ul { list-style: none; text-align: center; font-size: 0;}
li { display: inline-block; font-size: 24px; position: relative; padding: 8px;}
img { display: block; margin: 0 auto; }
span { position: absolute; bottom:8px; left:8px; right:8px; padding: 8px; background: rgba(0,0,0,0.4); color: #fff; }

Your exact CSS will be dictated by exactly what you want, but don't miss the takeaway point - don't use Masonry, it's unnecessary (and detrimental) for your specific requirements.

Upvotes: 2

Related Questions