Excess whitespace on thumbnails after search

Anonymous

#195659

If you check our search page: https://wholeearth.a2hosted.com/day/

You’ll see that when you click one of the filters the results suddenly have excess white space in their thumbnails. I don’t know where this is coming from and haven’t been able to figure out how to get rid of it even with cheaty CSS.

Thanks!

Trevor

#195660

I am not seeing any difference. Are you able to suggest a particular search I should do to see this, and maybe provide an annotated screenshot to illustrate (you would need to give me a link to where I can see the screenshot, such as a file sharing site)?

Anonymous

#195800

https://snag.gy/9E8sXb.jpg

The image is above. I am using Chrome on Windows and it occurs when I select any of the checkboxes on the left.

Trevor

#195815

Are you using our guide to Elementor Pro integration:

https://searchandfilter.com/documentation/3rd-party/elementor/

Note that the Masonry/Ajax code has since been changed, see here:

https://support.searchandfilter.com/forums/topic/elementor-pro-post-grid-issues-pagination-and-image-render-post-filter/#post-191836

If you have done these, I think I may have seen the effect you describe before, and found a solution, but I will need to find it again, so get back to me about the above first.

Anonymous

#196516

Yes I had followed that guide. I did not add the masonry code at all originally since i hadn’t selected the masonry option, but the updated code is now in functions.php and hte issue remains.

Trevor

#196582

This reply has been marked as private.

Anonymous

#196853

It still does it for me, both on mac and windows computers. Are you using Chrome?

Anonymous

#196855

I say that, but I have the same issue in Safari.

Trevor

#196857

Yes I am using Chrome in Windows. But now I see it. And I think I have a fix:

Add this custom CSS to the theme:

body.sfajax .elementor-380 .elementor-element.elementor-element-6c9e0661 .elementor-posts-container .elementor-post__thumbnail {
  padding-bottom: 0 !important;
}

Then you need to add a javascript to the page:

<script>
(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxstart", ".searchandfilter", function(){
    jQuery("body").addClass("sfajax");
  });
}(jQuery));
</script>

[Author]

Posts