[Resolved] Background style for hero

Home Forums Support Background style for hero

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1241071
    Norman

    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?

    #1241293
    Ali

    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;
    }

    #1241299
    David
    Staff
    Customer Support

    Hi there,

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

    #1241360
    Ali

    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.

    #1241462
    David
    Staff
    Customer Support

    Thats correct – the users site only has the H1 🙂

    #1242469
    Norman

    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.

    #1242661
    David
    Staff
    Customer Support

    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;
    }
    #1243400
    Norman

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

    #1243951
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.