Making WordPress.org

Opened 19 months ago

Last modified 8 months ago

#6631 new defect (bug)

Button padding produces horizontal scrolling issue and white space at very narrow widths

Reported by: himshekhar07's profile himshekhar07 Owned by:
Milestone: Priority: low
Component: Five For The Future Keywords: needs-patch
Cc:

Description

The page generates a horizontal scrolling bar and white space in the responsive (max-width:320px and below) on this page https://wordpress.org/five-for-the-future/.

Solution:

.wp-block-button__link{
padding: calc(0.667em + 2px) calc(0.333em + 2px);
}

For better understanding I provide the Video attachment Link:
Video link: https://share.cleanshot.com/3acw3opubpTOYhU6TPrK

Change History (1)

#1 @coffee2code
8 months ago

  • Component changed from WordPress.org Site to Five For The Future
  • Priority changed from normal to low
  • Summary changed from Padding issue which generate the horizontal scrolling issue and white space. to Button padding produces horizontal scrolling issue and white space at very narrow widths

Confirmed. This pertains to the "See Pledges from Organizations" button and only seems to be an issue at less than 340px wide, so it's on the edge of us not caring (which is usually 320px). And for me with Firefox on Mac, there wasn't any horizontal scrolling, but the right edge of the button (but not any button text) were clipped by the viewport.

FYI, the Five for the Future theme is maintained on GitHub and it is recommended to file tickets there: https://github.com/WordPress/five-for-the-future/issues/new. If you do so, be sure to circle back and close this ticket.

Note: See TracTickets for help on using tickets.