[Resolved] How to Center Text on Hero Image

[Monkeys and Mountains]

Hello, I’m trying to center text on my hero image but it’s not working. I”m guessing it’s because I’ve had to change the bottom padding to 500 to get the image to display properly. Please advise and if there’s another way to get the image to display properly without having to change the bottom padding so dramatically please let me know. Screenshot of my settings: https://paste.pics/6cc2c8556d60cfc407d501a08e4f3f84.

Please advise. Thanks

[David]

Hi there,

use equal top and bottom padding to vertically center the text.
Use % padding values to make the image more responsive.

[Monkeys and Mountains]

Hi David,
When I did what you suggest the header image became HUGE. I was able to center it by using multiple <br> but think there must be another issue with the settings somewhere as I should not have to have a bottom padding of 500px. Please advise.

[David]

You originally had 500px Top Padding.
Instead add 250px Top and 250px Bottom padding – the size will remain the same and the text will be centered. If its too large then reduce the top and bottom padding but make sure they are equal.

[Monkeys and Mountains]

Unfortunately, that didn’t work and it appears that it’s a sitewide issue as I’m having a similar issue on this page: https://monkeysandmountains.com/travel-blog/, even though the image is large, very little of it is showing and the padding is set to 15 on both the top and the bottom.

Please advise.

Thanks

[Leo]

15px is really small. Can you try something like 200px top and bottom?

[Monkeys and Mountains]

I tried 235 and it looks much better now, thank you, it’s just strange as on my other site the header looks fine and has a top padding of 5 and a bottom padding of 15: https://bestplacestovisitgermany.com/travel-germany-blog/.

Now, how do I add space between the header and the blog posts as it appears in the Germany blog. I checked the settings under Element and except for the merged header everything else appears to be the same.

Please advise.
Thanks

[Leo]

That page is actually using 5% and 15% as opposed to px.

As for adding space between page hero and blog posts, try adding some top content padding:
https://docs.generatepress.com/article/content-padding/

Let me know if this helps 🙂

[Monkeys and Mountains]

Awww, that’s why, missed that it was in %, and not px. Thanks. I only want the padding on this page, not other pages, i.e. on my homepage I don’t want it. How do I add padding just to this page?

Thanks

[Leo]

Looks like you are using the page builder container option for the home page already:
https://docs.generatepress.com/article/page-builder-container/

So adding padding in the customizer shouldn’t change anything for the home page.

Let me know 🙂

[Monkeys and Mountains]

I’m going to be deleting the pagebuilder from all pages, that’s why I need to know the custom CSS. Please advise.

[Leo]

The best practice is to use the page builder container option when you don’t want the padding (it can be used without page builder) then let the customizer settings apply for the pages you do want the padding.

If you really want to handle it manually, you can use this CSS:

.blog.one-container .site-content, .archive.one-container .site-content {
    padding-top: 40px;
}

[Monkeys and Mountains]

OK, good to know and thank you. Now the padding is fine but the text I have below the hero image and above the blog posts isn’t showing up.

Please advise.

[Leo]

What text are you referring to? I don’t see anything in the code.

There isn’t a text area between the page hero and the content on posts page either.

[Monkeys and Mountains]

The text seen here: https://snipboard.io/ST02BK.jpg. On the blog page there’s an area for text since it’s set as a page. You can see it on the back end. It’s just not showing in the front end.

Please advise.

[Author]

Posts