Twenty Sixteen: Some center-aligned images are not centered on live site

[jp-imagines]

Quick summary

Some images on Twenty Sixteen have a below-post-meta class on either the figure or img element. For some reason, there's a style applying -40% left margin to those, preventing them from ever being centered.

Steps to reproduce

1. Activate Twenty Sixteen.
2. Create a post with some images which are set to align center.
3. View the post on the live site.

What you expected to happen

Images set to align center should be centered.

What actually happened

Some images are not centered:

Browser

No response

Context

6742797-zd-a8c

Platform (Simple, Atomic, or both?)

Simple

Other notes

Only replicated on Simple so far. Tried a few other themes and couldn't replicate there. User reports this started only a few days ago.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

CSS fix:

body:not(.search-results) article:not(.type-page) figure.aligncenter img.below-entry-meta, body:not(.search-results) article:not(.type-page) figure.below-entry-meta.aligncenter {
    margin-left: 0;
}

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 6742797-zen
• [ ] 6765538-zen
• [ ] 6761812-zen
• [ ] 6798174-zen
• [ ] 6752201-zen
• [ ] 7070495-zen
• [ ] 7082359-zen
• [ ] 7186086-zen
• [ ] 7268524-zen
• [ ] 7539540-zen

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes/No

📌 FINDINGS/SCREENSHOTS/VIDEO Replicated across test sites. I think the .below-entry-meta is applying to images below the post's entry meta data, as shown here:

This seems like its intentional, to widen the content body below that first section of content in the post... but perhaps it's causing unintended consequences, or not making sense for customers?

Simple

https://github.com/Automattic/themes/assets/27249804/1d673dfe-92d0-4972-91f2-8de471120cb4

Self-Hosted

📌 ACTIONS

• Triage complete
• FYI @Automattic/theam
• Added to Bug Scrub Planning

[danielk-am]

6765538-zd Shared this CSS fix, which includes the image captions in the snippet.

body:not(.search-results) article:not(.type-page) figure.aligncenter img.below-entry-meta,
body:not(.search-results) article:not(.type-page) figure.below-entry-meta.aligncenter,
body:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
    margin-left: 0;
}

[AnjanaV93]

Another report here: 6761812-ZD

[laragee6]

6798174-ZD tested this on my test site as well with the same exact content as the user.

[louinel]

New case here: 6752201-zen I noticed the class below-entry-meta that added -40% of margin-left on the img element.

[aetta]

7070495-zen one more!

[wiesenhauss]

7082359-ZD The CSS fix worked for this site.

[AlexanderSky]

Isn't this the intended behaviour of the theme? It's the "Overhanging Full-Size Image" feature.

[cuemarie]

Isn't this the intended behaviour of the theme? It's the "Overhanging Full-Size Image" feature.

@AlexanderSky Since the theme indicates that overhang is for full-sized images wider than 840px, that implies that smaller-than-840px which are not full-width should not overhang - they should be contained within the same content margins as the rest of the content.

So in this issue, smaller-width images that are not full-width and are center-aligned are overhanging - which I believe is the unexpected behavior.

[laragee6]

also reported here 7186086-zen

[jp-imagines]

Another report in 7268524-zd-a8c. Gave some alternate CSS as a fix (as the CSS above seems to just be left-aligning within the content area now).

body:not(.search-results) article:not(.type-page) figure.aligncenter.is-resized img.below-entry-meta,
body:not(.search-results) article:not(.type-page) figure.below-entry-meta.aligncenter.is-resized,
body:not(.search-results) article:not(.type-page) .wp-block-image .is-resized figcaption.wp-element-caption.below-entry-meta {
    margin-left: auto;
    margin-right: auto;
}

[AnjanaV93]

Another report: 7539540-zen

[gikaragia]

This is an issue with the theme itself. A related issue can be found here: https://github.com/Automattic/themes/issues/7962

I raised it to WP core in: https://core.trac.wordpress.org/ticket/61723#comment:8