[Resolved] Page Header content left and bottom alignment

[Tara]

Hello,

Two questions about alignment of Page Header content:

1. How can the content/text be left aligned to start near the bottom left corner. I can use padding to ensure it doesn’t butt up against the left and bottom of the container, but I can’t figure out a way to specific X pixels (or %) from the bottom.

2. When I have “Vertical center content” enabled AND Text alignment set to “left,” the content is still centered horizontally. How can I get the content to left-align on the X axis while staying centered on the Y axis?

[Tom]

Hi there,

1. This might need some CSS – can you link me to the page?

2. This is unfortunately a limitation of vertically centered content using flexbox (which is what GP uses for vertical centering). I’m looking into a solution.

[Tara]

Thanks for the fast reply. Here’s a link to a sample page under development:

https://metcreativegroup.com/what-we-do/

Ideally – we’d like the “Branding, Marketing, and Sales” text on the Page Header image to be bottom & left aligned.

Thanks very much!

[Tom]

Can you try adding this CSS?:

.vertical-center-enabled .page-header-content-wrapper {
    align-items: end;
    justify-content: flex-end;
}

[Tara]

Great, that did it. Much appreciated!

[Tom]

Glad I could help 🙂

[Author]

Posts