WordPress.org

Make WordPress Core

Opened 8 days ago

Last modified 8 days ago

#49435 new defect (bug)

Twenty Twenty: inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari (cross browser issue)

Reported by: kthmd Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3.2
Component: Bundled Theme Keywords:
Focuses: css Cc:

Description

I've noticed on the latest WordPress and twentytwenty theme that there is an inconsistency in top and bottom margins, notably Chrome ignores lines style.css:5296 and style.css:5942 - so Chrome does not have the margins, but Safari does. This seems to be quite a large layout issue cross browser.

For example, use default twentytwenty theme, go to sample page and edit, create a cover block, set to fullwidth, and notice the top and bottom margin difference in Chrome (v80) and Safari (v13)

style.css:5296

	.entry-content .alignwide:not(.wp-block-group.has-background),
	.entry-content .alignfull:not(.wp-block-group.has-background) {
		margin-bottom: 6rem;
		margin-top: 6rem;
	}

style.css:5942

	.entry-content > .alignwide:not(.wp-block-group.has-background),
	.entry-content > .alignfull:not(.wp-block-group.has-background) {
		margin-bottom: 8rem;
		margin-top: 8rem;
	}

Attachments (2)

chrome.png (3.7 MB) - added by kthmd 8 days ago.
Chrome
safari.png (3.7 MB) - added by kthmd 8 days ago.
Safari

Change History (3)

@kthmd
8 days ago

Chrome

@kthmd
8 days ago

Safari

#1 @SergeyBiryukov
8 days ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from twentytwenty theme: inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari (cross browser issue) to Twenty Twenty: inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari (cross browser issue)
Note: See TracTickets for help on using tickets.