[Resolved] Masonry layout including large space gaps

[Author]

Posts

[Annie]

We have an archive for a custom post type set up in Toolset Blocks using a masonry layout, but for some reason there's random large gaps being inserted between the image and text on some of the items. I'm attaching a screenshot (the blue lines are showing where the gaps are, those aren't actually part of the page). Any idea what might be causing that?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To troubleshoot these gaps, I'll need to see exactly how this masonry layout is set up.

Can you please share temporary admin login details, along with the link to this archive page?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing the admin access.

During troubleshooting, I noticed that the archive is set to show the image slider block inside a view's loop with the masonry layout.

The loop items where the extra vertical space is appearing are the ones where the first slider image is shorter than the other available slider images. The slider area allocates the overall height of the slider block to match the tallest image. If you'll un-hide the slider's navigation arrows and scroll to the next image, you'll see that the next image will cover the extra vertical space.

For example, the first image in the "Edition Hotel" post is in the landscape orientation and is much shorter than the next one, which is in portrait orientation.

Screenshot 1: hidden link
Screenshot 2: hidden link

To overcome this, you'll need to make sure that all the images that you're showing through the slider blocks have the same orientation, either landscape or portrait.

I hope this helps and please let me know if you need any further assistance around this.

[Annie]

My issue is resolved now. Thank you!