masonry / image gallery animation – resizing browser window

Hi,

i serached the forum for hours but ccould not find the right solution.

We have a masonry blog grid. When resizing the browser window you see an animation where the images resize. So the gallery fits the browser window width again.
But, when this is done the images get overlapped (when scaling down), also there is a delay in the resizing of the images.

How can we remove the delay, and have the transition take place right away, and also no overlapping of the images taking place.

Really hope this is possible!

FYI; the below codes are not working:

.av-masonry-entry.isotope-item.av-masonry-item-no-image.av-masonry-item-loaded,
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
  -webkit-animation: none !important;
  animation: none !important;
  transition: -webkit-transform 0s, opacity;
-webkit-transition: -webkit-transform 0s, opacity;
-webkit-transform: translate3d(0px, 0px, 0);
}
.av-masonry-entry {
opacity: 1 !important;
visibility: visible !important;
}
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; 
-moz-animation:    none; 
animation:         none; 
} 

.js_active .grid-image{opacity: 1 !important;}
.grid-entry {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
}