[Support request] Space under subheadings

[Kiva]

There’s too much space under the subheadings when I use a separator. How do I remove the padding above the separator? Also, how to make the separators just a plain black stripe rather than two stripes?

[Ying]

Hi Kiva,

Do you use GenerateBlocks? If so, you can use the headline block of GenerateBlocks, it gives you full control over the spacing around it, and you can change its paddings/margins easily without using a separator.

If you don’t use GB, then try adding this CSS so you can define the margin of the separator:

.entry-content hr.wp-block-separator {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

Also, how to make the separators just a plain black stripe rather than two stripes?

It’s showing 2 lines, because of this CSS, it adds a border to the separator:

.wp-block-separator {
    border: 1px solid;
    border-right: none;
    border-left: none;
}

But this CSS seems added by WP, do you see any settings in the Seperator block?

As the Separator block is a WP core block, GP doesn’t have much control over it.

[Kiva]

Thanks for that. The bottom margin works, but the top margin is still too large — I set the margin to 0 and it still doesn’t get any smaller. Perhaps the margin on the subheadings need to be changed instead?

[David]

Hi there,

you can use this CSS to make the HR separator a solid line and adjust its default top and bottom margins:

.entry-content hr.wp-block-separator {
    border: 0;
    height: 3px;
    background: #000;
    margin-top: 30px;
    margin-bottom: 30px !important;
}

And if you want to specifically style it when it comes after a H2 heading then add this CSS:

.entry-content h2 + hr.wp-block-separator {
    margin-top: 0;
}

Note that the H2 has bottom margin that is set in the Customizer > Typography but changing that will affect all H2s.

The alternative would be to:

1. Don’t add a separator.
2. select the Heading block and in give it an Advanced > Additional CSS Class of: has-underline
3. Add this CSS to your site:

h2.has-underline {
    border-bottom: 3px solid;
    padding-bottom: 10px;
}

[Kiva]

I’ve tried these two options below and they didn’t do anything to remove the padding under the H2. I’ve also tried decreasing the line height on H2 but that created another problem that the text overlaps. Is there another way I can get rid of the space under an H2? I can’t select a heading block since I’m not using Generateblocks.

.entry-content hr.wp-block-separator {
border: 0;
height: 3px;
background: #000;
margin-top: 30px;
margin-bottom: 30px !important;
}
And if you want to specifically style it when it comes after a H2 heading then add this CSS:

.entry-content h2 + hr.wp-block-separator {
margin-top: 0;
}

[David]

Try this:

.entry-content hr.wp-block-separator {
    border: 0;
    height: 3px;
    background: #000;
    margin-top: 0px;
    margin-bottom: 30px !important;
}

can you see the change ?

[Kiva]

Unfortunately I can’t see a change with that code either. The bottom margin works, background, height… everything else, just not the top margin.

[Ying]

The top margin works if I disable your wp rocket by adding ?nowprocket to the URL:
https://www.screencast.com/t/OKuSlwtxsKy2

If this is not what you see, make sure the cache is cleared, or simply disable WP rocket.

[Author]

Posts