WordPress.org

Make WordPress Core

Opened 11 months ago

Last modified 8 months ago

#45993 new defect (bug)

Twenty Nineteen: Image aligncenter inside column is broken

Reported by: dianeco Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0.3
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: ui Cc:
PR Number:

Description

Since Twenty Nineteen v1.2, the images set to aligncenter aren't centered on the front-end when placed inside a column (they're centered inside the editor).

https://i.imgur.com/ud1ZuvJ.png

Attachments (1)

45993.patch (666 bytes) - added by Mista-Flo 8 months ago.

Download all attachments as: .zip

Change History (6)

#1 follow-up: @mukesh27
11 months ago

  • Focuses ui added

@dianeco you can please try below css. it is working fine for me in WordPress 5.1-beta1-44607

.entry .entry-content .wp-block-columns .wp-block-image .aligncenter { width: 100%; }

Try above css and let me know here so add patch.

#2 @laurelfulford
11 months ago

  • Keywords needs-patch has-screenshots added
  • Milestone changed from Awaiting Review to Future Release

#3 in reply to: ↑ 1 @Mista-Flo
8 months ago

Replying to mukesh27:

@dianeco you can please try below css. it is working fine for me in WordPress 5.1-beta1-44607

.entry .entry-content .wp-block-columns .wp-block-image .aligncenter { width: 100%; }

Try above css and let me know here so add patch.

It works on desktop, but not on mobile.

So we should be really careful when editing this CSS

#4 @truchot
8 months ago

Hi, it's seems code below in _block.scss fix this issue & no need media query anyone to test ?

.aligncenter {
	@include postContentMaxWidth();
	width: 100%;

	img {
		margin: 0 auto;
	}
}

@Mista-Flo
8 months ago

#5 @Mista-Flo
8 months ago

  • Keywords has-patch added; needs-patch removed

Just uploaded the patch from @truchot work, it removes unnecessary media queries and add a width 100% to the element.

Note: See TracTickets for help on using tickets.