Does anyone have experience with isotope element resizing?


Im using Isotype v2 to build a page on a client site and I cant seem to get the element resizing to work properly.

here is what im referring to: and

Im trying to set the width of the div element with the grid-sizer option, but I can it get it to work.

Here is my code

jQuery(document).ready(function($) {

var $container = $('#content').isotope({
itemSelector: '.moku_item',
masonry: {
columnWidth: $container.find('.grid-sizer')[0],
gutter: 5,
isFitWidth: true

transitionDuration: '0.5s',
hiddenStyle: {
opacity: 0,
transform: 'scale(0)'
visibleStyle: {
opacity: 1

var filterFns = {
standard: (function($) {
var name = jQuery(this).find('.name').text();
return name.match( /standard$/ );

image: (function($) {
var name = jQuery(this).find('.name').text();
return name.match( /image$/);

// filter items on button click
$('#filters').on( 'click', 'button', (function() {
var filterValue = $(this).attr('data-filter');
// use filter function if value matches
filterValue = filterFns[ filterValue ] || filterValue;
//console.log("this is " + filterValue);
$container.isotope({ filter: filterValue });
$container.on( 'click', '.moku_item-content', (function() {
$( this ).parent('.moku_item').toggleClass('is-expanded');


through wordpress ive managed to set the first div with the .grid-sizer class and the rest with .moku_item

Thank you for any help you can offer

Im not the best with jquery at all. So I can not figure out what im doing wrong. Any help would be awesome.