Isotope translate3d values are increased

Question

Please i need help i used isotope to filter my projects but projects are not well organized because inline style translate3d values are increased .. for example the first project should start with values 0px, 0px, 0px but in my case it starts at 40px, 0px, 0px

Without including javascript code i see 4 projects well organized like this

But when i include JS code i 3 projects at one row and not organized as it should be

Please visit my website to understand the problem the projects block positioned at the bottom of the page above the footer

Javascript

jQuery('document').ready(function () {
    var portfolio   = jQuery('#portfolio');
    var items       = jQuery('.items', portfolio); 
    var filters     = jQuery('.filters li a', portfolio); 

    items.imagesLoaded(function() {
        items.isotope({
            itemSelector        : '.item',
            layoutMode          : 'fitRows',
            transitionDuration  : '0.7s'
        });
    });
});

CSS

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
.isotope-item {
    /*I removed "transform 0.5s" and "!important"*/
    transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Answer 1

You're using a very old version of isotope, v1.5.25 (from 2013) but initiating it with js code from the current version ( transitionDuration: is not part of the old version). The most current version is v3.0.4 which does not use the .isotope css. Upgrade isotope.js to the current version and remove the above CSS.

Answer 2

Like Fenici said in his comment, the solution to this is to drop the internal padding on your <ul> like this:

ul.items {
    padding: 0;
}

Currently, there is a padding-right:40px; on the itemSelector 's parent which is not used during the calculation of the isotope elements positioning due to the different box model usage in JavaScript (and subsequently Isotope).