Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#27409 closed defect (bug) (fixed)

Buttons height in responsive mode

Reported by: azaozz Owned by: helen
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.8
Component: General Keywords: has-patch
Focuses: ui Cc:


Firefox forces line-height: normal for all buttons. In responsive mode, buttons.css sets line-height: 1 and increases the padding to 10px 14px. This works in WebKit and IE but makes all buttons quite larger in Firefox.

Attachments (1)

27409.patch (438 bytes) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (7)

#1 @azaozz
6 years ago

Currently this is not that visible as few mobile devices run Firefox but good to fix it anyways. The fix is straightforward: set line-height: normal and less vertical padding in responsive mode.

#2 @nacin
6 years ago

Asking MT to look.

6 years ago

#3 @azaozz
6 years ago

27409.patch seems to fix it for the "standard sized" buttons in current Firefox, Chrome and IE 8-11. Needs some more testing to make sure it doesn't break on some (older) devices/browsers.

This affects all buttons. We have line-height on almost all sizes but for most part it matches or is close enough to normal.

#4 @iammattthomas
6 years ago

Took a look at 27409.patch and it looks fine on all Mac browsers and devices I have access to. Can't test Windows Phone 7 at the moment but my hunch is it should be fine, given what's changed and the fact that desktop IE works.

#5 @samuelsidler
6 years ago

  • Keywords has-patch added

#6 @helen
6 years ago

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

In 27727:

Ensure buttons don't get overly tall in responsive views when a browser (oh, Firefox) enforces a line-height on buttons. props azaozz. fixes #27409.

Note: See TracTickets for help on using tickets.