[Resolved] Gallery Block adding large space above block in mobile view

[Author]

Posts

[conradA]

The lightboxed gallery images display with a reasonable amount of padding/margin when viewed on desktop and even Chrome's mobile view emulator, but on an actual mobile device, a large amount of space is added to the top of the gallery. I don't know where the space is being added, and haven't been able to reproduce it on a desktop to be able to fix it.

example page: hidden link

[Waqar]

Hi,

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

I've tested your website's gallery lightbox on my Samsung mobile and it showed correctly.
( example screenshot attached )

Are you experiencing this issue on a particular device or browser? If yes, can you share the details of the device and browser, along with the screenshot of how it looks?

I'll be in a better position to investigate this accordingly.

regards,
Waqar

[conradA]

The issue isn’t with the light box function, but with the space added above the row of images in the gallery block. Adding a screenshot from chrome on iphone

[Waqar]

Thanks for writing back and for sharing that screenshot.

I was able to see the issue on an iPhone too. During troubleshooting, I noticed that following CSS code from the active theme's "style.css" file ( /wp-content/themes/twentytwenty/style.css ) is causing this extra space:
( you'll find two instances of this code in that file )

.tb-gallery--grid--nocrop .tb-gallery__cell {
    	align-self: baseline !important;
}

If you'll remove this CSS code, the spacing will be fixed.

[conradA]

I've removed both instances of that code from the css, but am still observing the issue across devices.

[Waqar]

This seems to be a cache-related issue.

If you'll open that CSS file in the browser, with the following URL ( which the website is using), you'll see that the code is still there:
hidden link

However, try changing the same URL by just replacing version number 1.7 with any other number and you'll see that the code will not be available.

This suggests that your CDN (Cloudflare) or your website's cache plugin is still serving the older cached version of that CSS file. Please clear all involved caches, including the one in the mobile's browser and then check the page again.

[conradA]

My issue is resolved now. Thank you!