[Support request] Button Alignment Issue on GeneratePress Website

[Shane]

Hello, I am facing an issue with button alignment on my GeneratePress website. Despite formatting it to be centered, it automatically aligns to the left side.

I am not aware of such issue before 2023. Can it be caused by the WP or GP update? In the private box below, I have left a link to our site with examples.

Thank you for your assistance.

[Fernando]

Hi Shane,

Are you referring to the “Get it Free” buttons for instance? There was a recent WP update that remove some default stylings for some of their Blocks. It’s likely that.

Our suggestion is to use GenerateBlocks’ Container and Button Blocks instead.

For now, to revert those, try adding this CSS through Appearance > Customize > Additional CSS:

.is-content-justification-center.wp-block-buttons {
    text-align: center;
}

[Shane]

Hey Fernando, I suspect that is the cause. I have implemented your code. And, it seems to have fixed the issue.

Just so I understand your suggestion, do you mean we should use a container first, before we create the button block?

[David]

If you’re using the core button block, then it should automatically add the container it needs for centring the block

[Shane]

Thanks for chipping in, David. I’m a bit confused. How is the core button block different from the one we use in the GP editor? Are there two button blocks? Appreciate if you can clarify…

[Leo]

Take a look at this:
https://wordpress.org/documentation/article/buttons-block/
https://docs.generateblocks.com/article/buttons-overview/

In short, GP’s button block provides more options to customize.

[Shane]

Thanks Leo.

That is the way I have been using buttons. But, in this case, the WP update seems to effect that.

So, the takeaway is that I still need the CSS code, as the suggested alternative (button block) was already in use and been affected).

Right?

[Ying]

That is the way I have been using buttons

You are using the core WP button block, if you need CSS to center the button, it sounds like a WP button.

as the suggested alternative (button block) was already in use and been affected).

We suggested using GB’s button block, it’s alignment will not be affected by WP update. https://docs.generateblocks.com/article/buttons-overview/

[Shane]

Hi Ying, thanks for getting back.

I took another look and think I actually have been using the GP block.

My questions are:

Are these two buttons actually all GP button block? Why is the first one not carrying my formatting set up?

If only the second “Buttons” is the GP button block, then why is it affected by WP update, which caused an alignment issue, although now fixed by the CSS code?

If only the first “Button” is the GP button blocked referred by Ying, then how do I format them?

I have included a link and PIN to the example article below.

[David]

Can you confirm the post Password, the one provided didn’t work

[Shane]

Yes, it’s just numbers in the below.

[David]

I have tried that several times on several browsers and it is not working for me.

[Shane]

Hi David, I’m sorry to hear that. Please can you give it a try? I have removed the PIN.

[David]

Ah ok,

select the GB Button block, and from its Toolbar, there is an option to “Add to Button Container” then in that containers Layout you can Justify it to Center.
See here:

https://www.screencast.com/t/sOGr1XLgSy

[Author]

Posts