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

[himshekhar07]

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

[coffee2code]

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.

[ryelle]

The latest redesign has updated the homepage, so these buttons are not on the page anymore, and there is no horizontal scrolling at 320px.