Wrap H2 like this...

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

https://www.masteryblogging.com/
Entire post

I didn't get this, do I create Elements > Blocks and then add this two: h2-with-bg alignwide

What Elvin is proposing is you:

1. Add the CSS he has provided.
2. Edit the HTML for your heading in the Text editor - and write it like so:

<h2 class="h2-with-bg alignwide">The h2 heading text</h2>

Point 2 will be required for each H2 you want that style applied to.

If you want to apply the style automatically to all H2's in the single post content then you would need to do this:

1. First remove any CSS you have already applied to your H2.
2. Add this CSS:

.single-post .entry-content h2 {
    padding: 10px 56px;
    background-color: blue;
    color: #fff;
    margin-left: -56px;
    margin-right: -56px;
}

@media(max-width: 768px) {
    .single-post .entry-content h2 {
        padding: 10px 20px;
        margin-left: -20px;
        margin-right: -20px;
    }
}

thanks David, it worked

You're welcome

I am using the below CSS for background color in H2.

.single-post .entry-content h2 {
    padding: 10px 56px;
    background-color: blue;
    color: #fff;
    margin-left: -56px;
    margin-right: -56px;
}

@media(max-width: 768px) {
    .single-post .entry-content h2 {
        padding: 10px 20px;
        margin-left: -20px;
        margin-right: -20px;
    }
}

But, when we are putting H2 with any other plugin (WP Stackable), the background is coming due to this CSS. Like the below one:

I want to keep this effect with H2 entry content only, can you help me to exclude that?

In the CSS you will see this twice:

.single-post .entry-content h2 {

Change them to:

.single-post .entry-content > h2 {

That will apply only to H2s that are direct children of the entry-content container, not ones inside other containers

worked

Glad to hear that