Make WordPress Core

Opened 5 years ago

Last modified 4 years ago

#45993 new defect (bug)

Twenty Nineteen: Image aligncenter inside column is broken

Reported by: dianeco's profile 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:

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 4 years ago.

Download all attachments as: .zip

Change History (6)

#1 follow-up: @mukesh27
5 years 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
5 years ago

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

#3 in reply to: ↑ 1 @Mista-Flo
4 years 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
4 years 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
4 years ago

#5 @Mista-Flo
4 years 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.