Product loop leaving blank spaces

On the homepage of my site eightyonevintage.co.uk, it seems the product loop is leaving spaces where it shouldnt be.

I have tried this as recommended but it is not working:

Hello there,

Thank you for raising a new topic for this.

Please try these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    /**
    * Javascript-Equal-Height-Responsive-Rows
    * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
    */
    (function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
    heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
    row.equalHeight();}}
    return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;_this.data('grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
    $(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind(_this.data('grids-event-namespace'));return this;};})(window.jQuery);

    jQuery(function($) {

     if( $('div').hasClass('best-seller-products') ) {

       var $postsContainer = $('.best-seller-products');

       $(window).load( function() {
         $postsContainer.imagesLoaded( function() {
            $postsContainer.find('.product').responsiveEqualHeightGrid().addClass('resized');
         });
       });

     }

    });
  1. Update

Regards,
Kharis
aThemes Support

Hi

Sorry that has not resolved it.

Thanks

Hello there,

Thank you for updating me.

As checked from your site’s source code, you have enabled a caching with LiteSpeed Cache. So you shuld have to flush it whenever some changes or new code addition applies. Otherwise, the web browser will only load the cached version of your website.

Regards,
Kharis
aThemes Support

Hi there,

I did try clearing the cache as it was meantioned in the other support suggestion. I have now purged and disabled the plugin and turned off the caching from wordpress itself and it still isnt working.

When I refresh the page, as the page loads, it appears to put them in the correct order, but then as it is styled, it pushes them out and creates the white space.

Hello there,

As checked further, I found jQuery conflict that might be the source of your issue. I am flagging this ticket to our development team to check. And we’ll be back to you shortly with possible permanent solution.

Thank you for your patience.

Regards,
Kharis
aThemes Support

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .woocommerce.products.best-seller-products .product:nth-of-type(4n+1), .woocommerce .products.best-seller-products .product:nth-of-type(4n+1) {
        clear: left;
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

Hi there,

Thank you that resolved it.

Also, thank you for your patience working through the issue and for resolving it so quickly

Many thanks again

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

Thanks kharisblank, for help to resolve this issue. I am also facing this issue on a tech website that I recently start working. But now I resolve this issue due to your help. Thanks again.

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support