Struggling to have responsive tilled galleries

I believe your theme may be causing some issues here. Could you try to switch to one of the default themes for a few minutes, and let me know if it helps?

Hey Jeremy,
Well, it probably is but I must say every site im working on has the same outcome. I should also point out that the issues seem to happen only with Firefox.

After further testing, it appears the problem might be related to the fact that the gallery is placed inside a woo commerce tab.

These tabs are controlled via JS/CSS and the tab where the gallery is placed is visible by default. I’ve tried different techniques for laying out the tabs interface, floats and flex box, but as soon as I add any of those the gallery breaks.

I believe this is might be related to some JS that Jetpack uses to calculate the size of the gallery dom parent, so I was wondering if you know of any way I can get around this issue.

Thanks.

I’ve also noticed that resizing the browser always gets the gallery to display correctly, so im guessing something is messing with Jetpack’s initial calculations, probably it’s trying to get the container size before the layout is fully rendered?

Thanks for the extra details!

Jetpack uses the Content Width theme feature to control the width of the galleries:
https://codex.www.ads-software.com/Content_Width

It’s usually fairly easy to make embeds responsive with the CSS mentioned in the Codex article, but you’re right: since the tabs are controlled with Javascript, it might cause issues here.

Since $content_width is a core WordPress feature and is used by all embeds, I assume you’d run into the same issue if you were to add a Youtube video instead of a WordPress gallery.

Could you try to insert a Youtube video by pasting a Youtube URL onto its own line, and let me know how it goes?

Thanks.
Im aware of the Content_Width theme feature but as I’ve said I need to have a higher value than what is currently available to the gallery.

I’ve tried with a Youtube embed, you can see the result here:
https://snpy.link/Iz1kYA

Besides the red shirt is should be another image which is actually being pushed bellow, becoming invisible due to the overflow hidden. Same goes for the picture with the guy on the brown jacket, also should have another image besides.

As i’ve said, as soon as I resize the browser everything goes to normal and displays properly. This to me sounds like something related to JS, although at this point only Firefox is showing these issues. Does the Jetpack js code have any method I can call after window load to force the layout refresh? Would’t be the most elegant solution but would for now.

I can’t seem to be able to view that screenshot.

Could you try to upload it again?

Thanks!

Ok, please try this one instead:

I can see that screenshot, thanks!

I’ve asked one of our JS developers to take a look, and I’ll get back to you when I have some news.

Any news on this?

Our developers are aware of this issue, but I’m afraid that we don’t have a fix at the moment. Let me touch base with them, and I’ll let you know if they have any news to share!

Thanks for the update Ryan.

You’re welcome! Just to update you, it sounds like our developers are looking into this. But I do not have an ETA on a fix yet. I’ll let you know when I have more info!

Quick update, as I was just testing the new release of Jetpack and sadly this is still an issue.

I’m afraid we haven’t addressed this issue yet. I’ve asked our developer to take another look. I’ll let you know when I have some news.