Text in button align left instead of center

This topic has 11 replies, 6 voices, and was last updated 4 years, 7 months ago by Elvin.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
May 19, 2021 at 4:22 am #1789365

tommy

Hi,
I use GeneratePress Premium and GenerateBlocks Pro. I am building a silo page and want to add some text only buttons. Unfortunately I do not find any setting to make the text in the buttons to align left instadt of center.
Is there anywhere a setting to align the text in the button left instead of center? Or do I need to add some custom css for this?

Thank you!
tommy

May 19, 2021 at 4:58 am #1789419

David
Staff
Customer Support

Hi there,

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

May 19, 2021 at 12:02 pm #1790267

tommy

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

May 19, 2021 at 12:21 pm #1790293

Leo
Staff
Customer Support

Hi there,

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

You can use the private information field.

Let me know 🙂

May 19, 2021 at 12:51 pm #1790328

tommy

Hi Leo,
ok I insert the URLs and credentials.

May 19, 2021 at 7:51 pm #1790558
Elvin
Staff
Customer Support
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.
May 24, 2021 at 9:38 pm #1796752

Lox

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.

May 24, 2021 at 9:46 pm #1796759

Elvin
Staff
Customer Support

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.

May 24, 2021 at 10:45 pm #1796805

tommy

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

May 24, 2021 at 11:05 pm #1796827

Elvin
Staff
Customer Support

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. 😀

June 25, 2021 at 8:56 pm #1835386

nomadiceman

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?

June 27, 2021 at 4:42 pm #1836856

Elvin
Staff
Customer Support

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.
Author

Posts