[Resolved] Full Width Background Color For Headings

[MMS]

Hi, Is it possible to format headings i.e. H2 to be center aligned with a solid background color similar to the example in the following link?

I’ve looked in the usual settings but wonder if this is a custom CSS thing?

https://imgur.com/a/BWuGrPJ

Thanks

[Leo]

Hi there,

Not sure if I fully understand.

Can you link me to the example page so I know exactly what you are trying to achieve?

[MMS]

Here is the example page with the H2’s with a full width colored background.
https://www.matthewwoodward.co.uk/seo/on-page/internal-link-building/

[Ying]

Hi Simon,

Can you show us your site with the H2?
It can’t go full width likely because the content container has paddings set.

You would likely use CSS to add negative margin left and margin right to offset the paddings.

[MMS]

Hi, Here is a link to my site/post with H2’s as they are currently. Sorry, by full width I mean the full width of the text content container as in the example site above.

https://makemesustainable.com/nespresso-recycling-bin/

[Ying]

You don’t have container padding set, then you only need CSS to add the color:

.single-post h2 {
    background-color: lightblue;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

Change the lightblue to the color code you want.

[MMS]

Thanks, Thats exactly what I was after.

[Ying]

You are welcome 🙂

[Author]

Posts