Skip Navigation

[Resolved] Masonry layout including large space gaps

This support ticket is created 2 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 3 replies, has 2 voices.

Last updated by Annie 2 years, 7 months ago.

Assisted by: Waqar.

Author
Posts
#2149975
screenshot-example.jpg

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?

#2150249

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#2151379

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.

#2153899

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.