Align center buttons only on mobile

Hi there,

Usually, the popular design option for buttons on mobile is to fill the horizontal space:
https://docs.generateblocks.com/article/buttons-overview/#fill-horizontal-space

Would that work for you?

Let me know :)

I like it for desktop but not for mobile.

In fact, it works well on desktop but not on mobile.

Hi there,

edit the Page, select the Buttons Container ( Not the individual Button ):

https://docs.generateblocks.com/article/buttons-overview/#buttons-container-options

Then in the sidebar Settings - select the Mobile Tab and enable the Fill Horizontal Space option.

On desktop I want the buttons horizontally align.

On mobile I want the button vertically and centered aligned (inside the button container).

See this document - it shows how to Stack vertically and to Fill the space for mobile:

https://docs.generateblocks.com/article/buttons-overview/#buttons-container-options

This solution allowed me to center the buttons on mobile, but I'd like the buttons left-aligned on desktop and center-aligned on mobile. It's not possible from the editor.

Hi there,

This solution allowed me to center the buttons on mobile, but I’d like the buttons left-aligned on desktop and center-aligned on mobile. It’s not possible from the editor.

I've tried checking your site and it seems to be in maintenance mode.

We can try the custom CSS approach.

If you could temporarily lift the maintenance mode so we could inspect, we can help you out with the CSS @media rule for your buttons so we could control separately for mobile and desktop.

Now the site is live

Hi Azzura,

In the mobile view mode of the page editor, select the Buttons (not Button) block, choose to align center:
https://www.screencast.com/t/6COfg6Y0eOM

If I change the alignment on mobile it changes at the same time on desktop.

Try this:

Select the wrapper of the GB Button block and set center-on-mobile on its Additional CSS class(es) field.
https://share.getcloudapp.com/yAuDoPQ6

You then add this CSS:

@media(max-width:768px){
.center-on-mobile{
 justify-content: center;   
}
}