WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 6 months ago

#45858 new defect (bug)

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

Reported by: arunsathiya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-testing has-screenshots
Focuses: Cc:

Description

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.

Attachments (2)

Twenty Nineteen issue 1.png (1.6 MB) - added by arunsathiya 6 months ago.
Issue with Twenty Nineteen theme indicating container content cut off on the right
Twenty Nineteen issue 2.png (1.0 MB) - added by arunsathiya 6 months ago.
Issue with Twenty Nineteen theme indicating container content cut off on the right

Change History (5)

@arunsathiya
6 months ago

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

@arunsathiya
6 months ago

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

#1 @SergeyBiryukov
6 months ago

  • Component changed from Taxonomy to Bundled Theme

#2 @laurelfulford
6 months ago

  • Keywords needs-testing added

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.

#3 @laurelfulford
6 months ago

  • Keywords has-screenshots added
Note: See TracTickets for help on using tickets.