Make WordPress Core

Opened 11 months ago

Last modified 3 months ago

#56998 new defect (bug)

Twenty Twenty: large margins between widgets in footer (in admin area they seem smaller)

Reported by: warrior7089's profile warrior7089 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: css Cc:

Description

Hi,

There are large margins between widgets in footer in twenty twenty theme. https://ibb.co/qgdQGgV

In admin area they seem smaller and look better. https://ibb.co/9hPLwdj

Got advice to open trac ticket after opening support ticket at https://wordpress.org/support/topic/large-margins-between-widgets-in-footer-in-admin-area-they-seem-smaller/ and fixing the issue using css.

Change History (3)

#1 @sabernhardt
11 months ago

  • Component changed from General to Bundled Theme
  • Focuses css added
  • Summary changed from large margins between widgets in footer in twenty twenty theme (in admin area they seem smaller) to Twenty Twenty: large margins between widgets in footer (in admin area they seem smaller)

#2 @sabernhardt
3 months ago

  • Keywords needs-patch added

Every footer widget after the first has a large top margin on the front: 5rem on larger screens and 3rem on smaller screens.

.widget {
	margin-top: 3rem;
}
.widget:first-child {
	margin-top: 0;
}
@media ( min-width: 700px ) {
	.footer-widgets .widget {
		margin-top: 5rem;
	}
	.footer-widgets .widget:first-child {
		margin-top: 0;
	}
}

The margin has been that way in Twenty Twenty since the first version (it was even in the first version of Chaplin, which was the foundation for Twenty Twenty).

I do not recommend changing the front after people have been using this theme, though maybe the Widgets editor could reflect the 3rem margin (the editor canvas is less than 700 pixels wide).

.wp-block-widget-area__inner-blocks .block-editor-block-list__layout > .wp-block {
	margin-top: 3rem;
}
.wp-block-widget-area__inner-blocks .block-editor-block-list__layout > .wp-block:first-child {
	margin-top: 0;
}

#3 @sabernhardt
3 months ago

Thanks for the report!

Note: See TracTickets for help on using tickets.