Make WordPress Core

Opened 6 years ago

Last modified 4 months 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 needs-testing-info changes-requested
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 (3)

45993.patch (666 bytes) - added by Mista-Flo 6 years ago.
SCR-20240715-qved.png (488.1 KB) - added by karmatosed 4 months ago.
SCR-20240715-qvgo.png (508.5 KB) - added by karmatosed 4 months ago.

Download all attachments as: .zip

Change History (11)

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

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

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

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

#6 @karmatosed
5 months ago

  • Keywords needs-testing added

I think because this removes queries it needs some testing. I am going to add that to the keywords for now.

#7 @sudipatel007
5 months ago

  • Keywords needs-testing-info added; needs-testing removed

I have tried without patch and with patch but issue is not regenerated. I think we need more information to replicate the issue

#8 @karmatosed
4 months ago

  • Keywords changes-requested added

As shown in the above examples there is some issue with the alignment, the patch though doesn't resolve it. What it seems to do is make it worse on smaller screens. My recommendation at this point is to move this to getting a refresh and testing.

Note: See TracTickets for help on using tickets.