[Resolved] How to Center Text on Hero Image

Home Forums Support How to Center Text on Hero Image

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1015290
    Laurel

    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

    #1015330
    David
    Staff
    Customer Support

    Hi there,

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

    #1019322
    Laurel

    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.

    #1019380
    David
    Staff
    Customer Support

    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.

    #1030450
    Laurel

    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

    #1030489
    Leo
    Staff
    Customer Support

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

    #1030505
    Laurel

    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

    #1030545
    Leo
    Staff
    Customer Support

    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 🙂

    #1030593
    Laurel

    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

    #1030601
    Leo
    Staff
    Customer Support

    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 🙂

    #1030627
    Laurel

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

    #1030634
    Leo
    Staff
    Customer Support

    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;
    }
    #1031861
    Laurel

    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.

    #1032192
    Leo
    Staff
    Customer Support

    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.

    #1034953
    Laurel

    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.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.