[Support request] Spacing on Hero Image and Rounded Buttons

[David]

Hi There

I have created a hero image with elements using the header option. However, I can’t find how to create space between the title and the button I’ve added. So there’s some HTML I need to add.

Also, can give me the code to make the button rounded?

I’ve attached a sample page and the HTLM I’ve added. (I added the extra <p> to try and add space).

Thanks

[David]

Hi there,

your title is the H1, and its inside the page-hero so you can add this CSS to add some bottom margin to it:

.page-hero h1 {
     margin-bottom: 4em;
}

[David]

Hi David

There was no change when I added that.

It’s the button I was looking to move further down. Also, how do I make rounded edges on the button?

Thanks

[David]

Can you move the <a> outside of the H1 ?
So the HTML will be something like:

<h1>{{post_title}}</h1>
<a class="button" href.....> text </a>

Then change the CSS to:

.page-hero h1 {
    margin-bottom: 4em;
}

.page-hero .button {
    border-radius: 20px;
}

And make sure to clear the autoptimize caches afterwards.

[David]

Thanks, David, but there was no change with the spacing or button radius.

[Ying]

Hi David,

I’m not seeing the CSS being added to the site.

How did you add it?

[David]

Hi Ying

I added it to the customize section, although looking at it now it’s red.
I also tried to change the element classes to see if that needed to be called .page-hero h1 but that didn’t work.

[Leo]

I added it to the customize section, although looking at it now it’s red.

That could mean that you have some syntax error in the previous CSS.

If you need further help with this, please clear and disable the caching plugin so we can see the source better.

[David]

I have cleared and disabled the caching plugins and no change. The red CSS is now normal.

[Leo]

Can you make sure each of your @media, for example @media (max-width: 768px) { has a closing bracket }?

They are all missing from what I can see.

[David]

Yes, I see. I have done that now.

[Leo]

I still see quite a few CSS syntax errors. For examples:
https://www.screencast.com/t/oC1RCWXyatB

Please take a look at the correct format for @media here:
https://docs.generatepress.com/article/responsive-display/

Going over your CSS is not within our support forum scope.

You can use a service like this:
https://jigsaw.w3.org/css-validator/#validate_by_input

[Author]

Posts