- This topic has 11 replies, 4 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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
Customer Support
Hi there,
your title is the H1, and its inside the
page-heroso you can add this CSS to add some bottom margin to it:.page-hero h1 { margin-bottom: 4em; }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
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.
Thanks, David, but there was no change with the spacing or button radius.
Customer Support
Hi David,
I’m not seeing the CSS being added to the site.
How did you add it?
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.Customer Support
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.
I have cleared and disabled the caching plugins and no change. The red CSS is now normal.
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.
Yes, I see. I have done that now.
I still see quite a few CSS syntax errors. For examples:
https://www.screencast.com/t/oC1RCWXyatBPlease 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
- You must be logged in to reply to this topic.
