[Resolved] Gallery Issue Blocks 1.6

[Author]

Posts

[JoelK2744]

Hello, I've updated to blocks 1.6 on our test site and when on mobile there are big gaps between the gallery cells. Here is an example - hidden link - if you compress the browser so the site responds to mobile, and then scroll down to the gallery images you will see the big gaps. This is what it's meant to look like (this is with Blocks 1.5.3) - hidden link

I've tried clearing caches etc and I can't see any obvious changes in the CSS.

Thanks

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

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

While, I can see the extra gaps between the gallery images on smaller screens on your website, I couldn't reproduce this on my test website.

As a quick fix, you can include this custom CSS code in your content template and the gaps will be removed:

@media only screen and (max-width: 768px) {
.tb-gallery--grid:not(.tb-gallery--grid--nocrop) .tb-brick__content {
	margin-top: -100%;
}
}

To investigate this further, I'll need to see exactly how this gallery block is set up in the admin area, to reproduce this on a test website.

Can you please share temporary admin login details, in reply to this message?

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

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing these details.

During further investigation, I found that this custom CSS code from WP Admin -> Appearance -> Customize -> Custom CSS, is responsible for the extra space/gaps:

#listing-gallery .tb-brick__content {
		height: auto!important;
		position: inherit!important;
	}

If you'll remove it, both the galleries will show with correct spacing on the smaller screens.

[JoelK2744]

Ah great, thanks Waqar. I'd forgotten about that snippet, looks like it's no longer needed.