[Resolved] Buttons spaced evenly when viewing on mobile

[CRAIG]

I am using one of the pre-made hero images.

I have checked and checked again but I cannot see any “uneven” padding or margin added to the left/right of the buttons or the container itself

The buttons are aligned left and this displays correctly on desktop

When viewing as tablet, I have selected “fill horizontal space” and this works as expected with even padding at the left and right of the screen

When viewing as mobile, with “Stack vertically” selected, the buttons are stacked vertically with even padding at the left and right of the screen

When I select “Fill horizontal space”, the buttons are not stacked the way I would like them to be as there are 2 buttons on one line and 1 button below, however, the padding to the left/right of the buttons is at least even.

Now the problem: when I select “Fill horizontal space” and “Stack vertically” at the same time, the padding to the right of the screen is much smaller than it is on the left.

This is annoying because having the buttons stacked vertically and using up the full horizontal width (minus padding) is what I need it to do.

I cannot decipher why this is hapenning, I have checked all of the container and button spacing settings and they are all exactly even left/right

I have added a link to the homepage privately, perhaps you could take a look for me

Thanks

Craig

[David]

Hi there,

you have 10px of margin added to the Buttons – which is causing the offset.
Select each button withe Mobile view selected and set the left/right margin to 0

[CRAIG]

Thanks David,

I couldn’t get my head around this because the margin was the same on both sides but I take it this was to do with the fact that the buttons were set to the left to begin with

[David]

Glad to be of help.

[Author]

Posts