Archived topic

Background style for hero

8 replies · Started by Norman on April 16, 2020

Viewing posts 1–9 of 9

April 16, 2020 at 12:32 am #1241071

Hey there,
i tried to add a background color to h1 headline in the hero.

This is what I added to the Header Element:


<h1 class="title-background">{{post_title}}</h1>

and this is the css I added:

h1.title-background {
    background-color: #00af95;
    color: #fff;
    padding: 5px

My problem: The background color spans the whole column and not only the text. How do I fix that?

April 16, 2020 at 5:15 am #1241293

You need to give the div that contains the h1 tag a fixed width.

.inside-page-hero {
width: 500px;
margin-left: auto;
margin-right: auto;
}

April 16, 2020 at 5:30 am #1241299

Hi there,

in your h1.title-background CSS include the display: inline; property

April 16, 2020 at 6:26 am #1241360

Hi David,

I think that only works if you don't have another block after the title. If you have h1 tag and then maybe h2 tag under it, then the two would go side by side with inline display.

April 16, 2020 at 7:44 am #1241462

Thats correct - the users site only has the H1 :)

April 17, 2020 at 12:14 am #1242469

Thx for the feedback.
The inline option does nothing.
And the fixed width is obviously not dynamic. So, if a post has a shorter title, it will still look a bit weird.

April 17, 2020 at 3:53 am #1242661

Your CSS is broken:

h1.title-background {
    background-color: #00af95;
    color: #fff;
    display: inline padding:10px;
}

it should look like:

h1.title-background {
    background-color: #00af95;
    color: #fff;
    display: inline;
    padding:10px;
}

April 17, 2020 at 12:10 pm #1243400

Oh lol. Thank you for catching that. Must have been blind. Works now! :)

April 18, 2020 at 3:33 am #1243951

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.