Twenty Nineteen: Container content cut off on the right for specific browser widths

[arunsathiya]

Originally reproduced here: ​https://github.com/Automattic/jetpack/issues/11058

Steps to reproduce:

• Install Twenty Nineteen on a site
• Create a post or a page
• Write content (or, what works best for reproducing is when one is using Jetpack's tiled gallery with circles layout)
• Add a few images on that tiled gallery

What is expected?

The images appear in circles layout in full

What happens instead?

A few images are cut off, on the right

Notes:

After a bit of investigation on that Jetpack issue, the issue seems to be specific to this CSS declaration:

@media only screen and (min-width: 1168px) {
  .entry .entry-content > *,
  .entry .entry-summary > * {
    max-width: calc(6 * (100vw / 12) - 28px);
  }
}

It seems to impact all containers at specific browser widths.

[arunsathiya]

Issue with Twenty Nineteen theme indicating container content cut off on the right

[arunsathiya]

Issue with Twenty Nineteen theme indicating container content cut off on the right

[laurelfulford]

Thanks for reporting this issue, @arunsathiya!

I was able to recreate, at browser sizes between about 1330px and 1167px wide.

I'm not really sure the best fix here. If it's specific to a Jetpack Gallery type, it's probably best fixed ​here. But if this is affecting other embeds, and can be fixed on the theme level, in the theme itself makes sense.

I think this one needs some more investigating to see if it's any wider reaching.

[sabernhardt]

Tiled Gallery block and classic tiled gallery with Twenty Nineteen, showing images cut off in the classic gallery

[sabernhardt]

I do not think this is something to try fixing in themes, and it is not exclusive to Twenty Nineteen.

I was able to reproduce it with:

• Jetpack's ​classic tile gallery, which is based on a shortcode
• WordPress.com Free (but [gallery type="circle"] somehow did not work for me in a self-hosted site with Jetpack and Classic Editor)
• Twenty Nineteen, Twenty Twenty or Twenty Twenty-One

Jetpack's classic tiled gallery gives each row exact width and height values and then hides the overflow. The width comes from the theme's $content_width value, which is 640 for Twenty Nineteen. That could be changed using the plugin's tiled_gallery_content_width filter, but Core themes have avoided adding special support for specific plugins (such as WooCommerce).

The Core Gallery block and Jetpack's Tiled Gallery block did not cut off images for me.

[karmatosed]

I agree with the suggestion to close this so going to follow through with that. Thank you everyone.