Excessive widget margin (bottom) on live page but not in builder? Read this…

PSA

Just resolved a weird ‘margin / spacing’ problem that was caused by another plugin…

After adding a Blog grid to a page, there were excessive margins below each grid row. Like, really obviously too big margins.

Also, if you have more than one row then there’s an excessive margin between each row.

In my own case, it’s caused by WPMU Dev’s Smush plugin and specifically its Lazy Load feature. But I’m guessing it’s relevant to any Lazy Loading.

It appears that Elementor’s calculating widget / spacing heights on the fly when the page loads. But if lazy loading is on then it doesn’t take into account the height/size of an image that’s yet to load.

You can check this by loading the page, seeing the excessive margins, scrolling all the way to the bottom (so all images are now loaded), resize your web browser (eg ‘unmaximise’ it), maximise it again and all margins should now appear OK.

Solution: switch off Lazy Loading for that particular page. Not ideal, but does the trick.

PS. Tried a couple of different blog grid widgets (Essential addons for Elementor, Premium addons for Elementor) before I found the problem, so it’s not specific to a particular addon as they both had the problem.