So I’m making a gallery page on my website using a filtering plugin called Isotop. The live gallery link: carroofies.com/gallery

What I’m facing right now is an issue with the first load on the page, the images overlap on each other and it is fixed when I go to one of the filters I have. (mobile and desktop have the same issue).

One fix I tried is to set a height for the images and it seems to work but it would ruin the masonry look of the gallery. Any suggestions on how I can make this better?` It also might the initialization of the Isotope grid that is not running on load.

Gallery JS:

// external js: isotope.pkgd.js  // init Isotope var $grid = $('.grid').isotope({   itemSelector: '.element-item',   layoutMode: 'masonry'   //options: https://isotope.metafizzy.co/layout-modes.html }); // filter functions var filterFns = { //   // show if number is greater than 50 //   numberGreaterThan50: function() { //     var number = $(this).find('.number').text(); //     return parseInt( number, 10 ) > 50; //   },   // show if name ends with -ium   ium: function() {     var name = $(this).find('.name').text();     return name.match( /ium$/ );   } }; // bind filter button click $('.filters-button-group').on( 'click', 'span', function() {   var filterValue = $( this ).attr('data-filter');   // use filterFn if matches value   filterValue = filterFns[ filterValue ] || filterValue;   $grid.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) {   var $buttonGroup = $( buttonGroup );   $buttonGroup.on( 'click', 'span', function() {     $buttonGroup.find('.active').removeClass('active');     $( this ).addClass('active');   }); }); 

The relevant CSS:

/* ---- .element-item ---- */  .element-item {   /*height: 150px;*/ }  /*@media (min-width: 992px){*/ /*    .filtr-item{*/ /*    height: 150px;*/ /*    }*/ /*}*/   /*POTENTIAL FIXES FOR OVERLAPPING IMAGES ABOVE^^^*/ /*-----------------------------------------------*/  /*@media (min-width: 460px){*/ /*    .col-sm-3 {*/ /*        flex: 0 0 25%;*/ /*        max-width: 25%;*/ /*    }*/ /*}*/  @media (max-width: 576px){     .filtr-item {         flex: 0 0 33%;         max-width: 33%;     } }  @media (max-width: 350px){     .filtr-item {         flex: 0 0 50%;         max-width: 50%;     } }  .filtr-container {   margin: 0 -4px; }  .filtr-item img{     border-radius: 5px;     cursor: pointer; }  .filtr-item a{     transition: .5s ease !important; }  /*image hover effect*/ @media only screen and (min-width: 600px){     .filtr-item a:hover {         -webkit-transform: scale(1.05);         transform: scale(1.05);         box-shadow: 0 10px 10px rgba(0, 0, 0, .15) !important;     } }  .filtr-item {   padding: 4px; }  .filtr-controls {   font-family: Gilroy;   font-weight: 700;   text-align: center;   font-size: 18px;   text-transform: uppercase;   margin: 30px 0 15px;   transition: .5s ease; }  .filtr-controls span {     display: inline-block;     font-size: 15px;     margin: 5px 10px;     cursor: pointer;     padding: 5px 0;     position: relative;     color: white;     background-color: #323232;     border-radius: 10px;     padding-left: 15px;     padding-right: 15px;     transition: .5s ease; }  .filtr-controls span:hover, .filtr-controls span.active {   color: #0fc3f9;   transition: .5s ease; }  .filtr-controls span.active:after {   font-family: FontAwesome;   content: '\f111 ';   font-size:6px;   width: 0;   height: 0px;   position: absolute;   bottom: 0;   left: 46%;   background: transparent;   -webkit-transition: all .6s ease;   transition: all .6s ease; }  /*.filtr-controls span.active:after {*/ /*  width: 100%;*/ /*  left: 0;*/ /*  background: #000;*/ /*}*/  /*@media (max-width:300px) {*/ /*  .filtr-item {*/ /*    width: 100%;*/ /*  }*/ /*}*/  .filtr-item > a {   position: relative;   display: block; }  .filtr-item > a:before, .filtr-item > a:after {   -webkit-transition: all .6s ease;   transition: all .6s ease; }  .filtr-item > a:before {   content: ' ';   position: absolute;   z-index: 10;   top: 0;   left: 0;   bottom: 0;   right: 0;   background: transparent;   transition: .5s ease; }