Archived topic

Page Header Title styling

5 replies · Started by Coen on September 12, 2017

Viewing posts 1–6 of 6

September 12, 2017 at 1:26 am #383696

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

September 12, 2017 at 7:57 am #383933

Hi there,

Can you link me to a page? Thanks!

September 12, 2017 at 4:12 pm #384257

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

September 12, 2017 at 4:44 pm #384271

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.

September 12, 2017 at 5:22 pm #384282

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

September 12, 2017 at 5:30 pm #384285

Glad I could help! :)

This archived topic is closed to new replies.

Start building better websites today.