Kale Theme: Large gap between header slider and feature articles on front page

Hi @elbyttp,

Thanks for reaching out, and thank you for using Kale- we really appreciate it!

It’s tough to say for sure without being able to inspect it in action, but it sounds like it’s being caused by some type of performance/optimization plugin. Some plugins replace image URLs with dummy images, and if they don’t use the same ratio as the actual image, it can cause issues like this.

If you aren’t able to track it down, let us know and we’d love to try to help further!

Thanks @stevenlyrathemes – I have now launched my site (https://thetastefulpantry.com) and still haven’t been able to identify the reason for the gap. Grateful for any insight you might be able to provide.

Love the site, those are great images!

It looks like it is due to a performance plugin, it’s initially replacing the lazyloaded slider images with a base64-encoded image:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

The downside to this technique is that since these data images that are being inserted are square (1px by 1px), they don’t match the ratio of the slider images that they’re replacing. This causes the big white space at the bottom of the slider.

It might be worth checking to see whether your performance plugin supports exclusions, if so, this selector should do the trick:

.owl-carousel-item img

Oh my goodness, thank you it is fixed. So simple – yet never would have figured it out myself! ??

And thanks, I love the theme – perfect for what I wanted!

So happy to hear that it worked out- thanks for letting us know, and thank you so much for the kind words! ??