Text in button align left instead of center

Hi there,

Edit the Button and remove/reduce its left hand padding.

Hi David,
the button has two lines and there also other buttons above and below. When I reduce or remove the left hand padding, the text is still central, it just starts a little bit more left.
Is there another way to align the text left instead of center?

Best regards
tommy

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hi Leo,
ok I insert the URLs and credentials.

Hi there,

Are you aiming for something like this?

If so, this can be done with custom CSS:

Example:

.gb-button-wrapper span.gb-button-text {
    text-align: left;
}

There's no option within GB UI at the moment.

Thanks, for the css snippet that works as intended.

I am vouching for that UI feature. (with responsive support)
On mobile when the text of a button wraps, the center alignment doesn't look nice with icons.

On mobile when the text of a button wraps, the center alignment doesn’t look nice with icons.

Can you provide any mockup image of how you want it to look on mobile?

Currently, it looks like this for buttons with text wrapping - https://share.getcloudapp.com/YEuZg4Lp

Do you want the icon to align on the first line instead? Let us know.

This response was not from me. I also vote for an UI feature, but not saw any issues with your solution yet. Thank you.

This response was not from me. I also vote for an UI feature, but not saw any issues with your solution yet.

I've raised an issue to make sure it doesn't get missed - https://github.com/tomusborne/generateblocks/issues/60

But it's up to Tom which function/feature gets priority implementation on the next version/s.

For now, the solution to get the desired layout is through custom CSS. :D

This is great, I've been wrecking my mind trying to figure what I was missing. The CSS worked great

However is there a way to target a specific button only? So the alignment doesn't work on the entire site?

However is there a way to target a specific button only? So the alignment doesn’t work on the entire site?

GB elements normally have unique numbers on their classes. You can use that as a unique selector.

Or you can assign a new unique class or ID to it and use that as a selector for your CSS.