[Resolved] Formatting text on hero images

[Mona]

Hi! I’m trying to format text on my hero image. It’s in the bottom right, and I would love it to be directly under the nav bar. https://kittenwithawhip.com/

This is the .css I’m using trying to control it, but all the tinkering I’ve done has simply gotten me further from where I want to be.

Thanks!

.page-hero-content {
    padding: 20px;
    border: 0px solid rgba(211,211,35,0.2);
    border-radius: 10px;
    max-width: 700px;
}

@media (max-width: 1200px) {
    .page-hero-content {
         padding: 10px;
         margin: auto;
    }
}

.inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: "left right";  
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}

.page-hero-content {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: right;
}

@media (max-width: 768px) {
    .inside-page-hero {
        display: block;
    }
}

[Leo]

Hi there,

Can you disable your caching plugin and Autopimize for me to inspect the code better?
https://www.screencast.com/t/beycLsm91yu

Thanks!

[Mona]

Apologies! Done!

[Leo]

So looks like you’ve added 550px of top padding in the page hero.

Can you try something like 200px of top padding and 350px of bottom padding?

Let me know 🙂

[Mona]

That’s it! Thanks! It was 550px in the element and I had to change it in the CSS.

[Leo]

You shouldn’t need CSS for that as it’s an option:
https://docs.generatepress.com/article/header-element-overview/#padding

[Mona]

Doh! Of course. Thank you for your help!

[Leo]

No problem 🙂

[Author]

Posts