Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#29451 closed defect (bug) (fixed)

"customize your site"-button overlaps column

Reported by: pixolin's profile pixolin Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch
Focuses: ui, administration Cc:


Dashboard has a "Welcome to WordPress"-section that comes with a button "customize your site".

While this button perfectly fits in the column untranslated, depending on screen size it overlaps when translated e.g. into the much longer "Dein WordPress individualisieren". (An image that shows the overlapping can be found at

To my understanding, this could be fixed by setting a max-width to the button's CSS class:

.wp-core-ui .button-group.button-hero .button, .wp-core-ui .button.button-hero { 
  max-width: 100%; }

Attachments (5)

dashboard.css.patch (429 bytes) - added by shooper 10 years ago.
29451.png (18.9 KB) - added by SergeyBiryukov 10 years ago.
29451.patch (451 bytes) - added by SergeyBiryukov 10 years ago.
29451.2.patch (323 bytes) - added by janhenckens 10 years ago.
29451.3.patch (325 bytes) - added by janhenckens 10 years ago.

Download all attachments as: .zip

Change History (17)

#1 @SergeyBiryukov
10 years ago

  • Component changed from Formatting to Administration
  • Focuses ui administration added; accessibility removed

#2 @helen
10 years ago

  • Version changed from trunk to 3.8

#3 @shooper
10 years ago

Created a patch that gets this partially fixed. See:

Line height is off when it wraps now. Not sure how to handle this. Over to someone else with better CSS chops :)

#4 @zodiac1978
10 years ago

For German this is fixed now by changing the string on GlotPress.

But the CSS from @shooper looks fine and would be a more bulletproof version for this button.

Last edited 10 years ago by zodiac1978 (previous) (diff)

10 years ago

#5 @SergeyBiryukov
10 years ago

  • Milestone changed from Awaiting Review to 4.1

29451.patch fixes the line height: 29451.png.

#6 @SergeyBiryukov
10 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 29790:

Account for longer translations of 'Customize Your Site' button label.

props shooper.
fixes #29451.

#7 @zodiac1978
10 years ago

I don't know if this comment from Helen is relevant here, but maybe switch to em insteadt of pixel?

#8 @SergeyBiryukov
10 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Yeah, I guess we should use em for line-height. Related: #7296.

Last edited 10 years ago by SergeyBiryukov (previous) (diff)

#9 @janhenckens
10 years ago

  • Keywords has-patch added

Changed to line-height to use em's instead of pixels, patch added.

#10 @afercia
10 years ago

the button font size is 14px (not 13px)
the last patch sets a line-height of 1.538em
thus the computed line height value would be 21.532px (in Chrome dev tools inspector is 21.5319995880127px)

if you want a computed value of 20px, then the magic number is 1.4285714 (unitless is better)

#11 @janhenckens
10 years ago

Thanks for the suggestion afercia! New patch has the correct unitless value.

#12 @SergeyBiryukov
10 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29828:

Switch line-height added in [29790] to a unitless value.

props janhenckens.
fixes #29451.

Note: See TracTickets for help on using tickets.