[Support request] How to make post page header center aligned

[Anant]

Hi Team,

I am looking to center align the header of post page to make it more suitable with the single column view.

I tried changing the element of “Post page hero” by creating a duplicate one with changes but was unable to do so.

I have shared an example of layout what I am looking to achieve in private information along with the page where I am testing it on.

Can you please help with this?

[Leo]

Hi there,

Just to confirm, are you trying to replicate the exact style as shown in the example or simply trying to center this section here?
https://www.screencast.com/t/u96o8Gc3EFI

Let me know 🙂

[Anant]

Centering would work fine I guess Leo.

[Fernando]

Hi Anant,

Set the Container Block holding the title and other stuff to display – flex. Then, alignment settings will appear. You can choose the alignment you prefer there.

Reference: https://docs.generateblocks.com/article/layout-options-overview/#flex

[Anant]

Hi Fernando,

I tried it but it didn’t work. Heres’ a screenshot: https://imgur.com/os0Yziu

Also apart from heading, the other 2 containers should also be center aligned.
I have shared the login details in private info as well to look it up in case required.

[Fernando]

When you are done editing, can you leave the Edit page of that Block Element so we can view it? We’ll check what needs to be done.

[Anant]

Hi Fernando, I’ve left. Please check now.

[Fernando]

Disable “Use legacy layout system”.

Set the width of the Container Block to 100%. It’s currently set to just 40%.

Set the display to flex. Align it center. Reference: https://docs.generateblocks.com/article/layout-options-overview/#flex

[Anant]

Did the same but no change in results. Can you please check.

[David]

Hi there,

check now.

1. I duplicated the entire Container Block and deleted the original.
This reset the unique CSS Classes as currently it was conflicting with the original hero that you copied it from.

2. the Parent Container
Layout > Disabled the Legacy Container
Sizing > Max Width set to 600px
Spacing > Left & Right Margin set to auto

[Author]

Posts