[Resolved] Page Header Title styling

[Coen]

Hello there,

I am loving the Page Header function! Awesome full width and paralax!
I have made a Global Page Header for my single posts. And I have this in the content box:

<h1>{{post_title}}</h1>
{{post_date}} | {{post_author}}

And I’m looking for a way to make the title and date + author to sit lower in the image when on Desktop. Not sure if I can add some padding somewhere, or if this needs to be done in CSS?

Adventurous greetings,
Coen

[Leo]

Hi there,

Can you link me to a page? Thanks!

[Coen]

Hi Leo,

These pages: https://new.landcruisingadventure.com/typhoon-to-okhinohama-beach/

I’m looking for a way to move the text lower in the image.

Thanks for having a look.

Adventurous greetings,
Coen

[Leo]

Try this CSS:

.page-header-content-container {
    padding-top: 20%;
    padding-bottom: 5%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

You can move it down more by decreasing padding-bottom and increase padding-top to keep the image the same size.

Let me know if this helps.

[Coen]

Okay Leo, way to go. Thanks for showing me this. I can figure out the rest.

I see that the image itself will show less, because of the settings in the header I guess with the padding. I will play a little and see how I like it best.

Thanks again.

Adventurous greetings,
Coen

[Leo]

Glad I could help! 🙂

[Author]

Posts