[Resolved] How to customize Single Post header

[Dave]

I am looking at making my single post headers like this: https://www.saltinourhair.com/travel-blog/best-places-to-travel/
I am wondering if this is possible with the header elements and some CSS or it is something more involved.
Any help would be appreciated.
It would have to stack on mobile as well.

cheers,

Dave

[David]

Hi there,

Check this topic:

https://generatepress.com/forums/topic/blog-post-makeover/#post-1543836

Its something very similar ie. a 2 column header element.

[Dave]

Thanks David. That definitely helped. I am just haveing a little issue styling the excerpt with the padding of the content on mobile. I want the padding to be the same but can’t seem to figure out how to do this.

Cheers,

Dave

[David]

Do you want to just add extra padding to the Excerpt ? Or have the whole hero align with the Content below it ?

[Dave]

The whole hero on mobile would work great and probably be easier.
Thanks.

Dave

[Dave]

Also is it possible to make the container 40% for the excerpt and title and 60% for the image on desktop?

Cheers,

Dave

[Leo]

Just answered your question here:
https://generatepress.com/forums/topic/changing-single-post-hero-grid-size/#post-1600201

[Dave]

Thanks Leo. Any suggestion on the first question of how to add padding to the excerpt on mobile
Cheers,

Dave

[David]

Try this CSS:

@media(max-width: 768px) {
    .page-hero-excerpt {
        padding: 20px 20px 20px 20px;
    }
}

I left the padding as all values so you can adjust Top, Right, Bottom, Left individually.

[Dave]

Perfect. Thanks David.

cheers,

Dave

[David]

You’re welcome

[Author]

Posts