[Resolved] Feature request : top margin setting in the customizer for headings

[Dirkje]

Hi Tom,

In the customizer headings section you have the option for setting the bottom margin for each heading. Is it possible for you to add an option for the top margin of the headings as well? Would be awesome!

[David]

Hi there,

there is a slight issue with adding top margins in that margins collapse ie. if a heading follows an element that has a larger bottom margin then the headings top margin won’t be noticeable. So you would have to add a much larger margin to the headings to see any result. This would effect all headings on the site including those used in the archives. So its a bit tricky.

I personally like more space between the end of a paragraph and the H2 headings and i use this CSS to do that:

p + h2 {
    margin-top: 2em;
}

It will only add top margin to the heading if it comes after a paragraph.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dirkje]

Hi David,

Thanks for your explanation and for the css. That sounds smart!

Thanks and kind regards,
Dirkje

[David]

Happy to be of assistance

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Markus]

I tried that with my installation – and it doesn´t work. I would love to put a top-margin on h1, h2, h3, h4 Headings – but everything I try doesn´t work. Please, help. 😉

[David]

Hi there,

if you want to raise a new topic where you can share a link to your site i can take a look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Markus]

Hi David,

thx for the reply – if xou check under https://police-it.net/organisierte-kriminalitaet-als-alternativer-geldgeber-fuer-klamme-unternehmen

There you see all the h3 headlines like”KEINE Liquiditätsprobleme hat nur “der Staat” und die organisierte Kriminalität”

I would love to change the margin-top – but every attempt to try via css is not working. Top margin won´t change. I would love to have some help here!

thx for the help!

[Tom]

Have you tried something like this?:

.entry-content h3 {
    margin-top: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Markus]

I just tried it and it doesn´t work – unfortunately.

[David]

Try increasing the top margin to a much greater value to see it working.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Markus]

I tried with 2000 px – no effect 🙁
Just to make sure – we´re talking this site https://police-it.net/organisierte-kriminalitaet-als-alternativer-geldgeber-fuer-klamme-unternehmen There you have a bunch of h3 headings …

[David]

Where are you adding the CSS ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Markus]

In the extra css within the Customizer.

[David]

You have some broken CSS. Your UL code is missing a close bracket:

ul {
	counter-reset:li; /* Initiate a counter */
	margin-left:16px; /* Remove the default left margin */
	padding-left:0px; /* Remove the default left padding */
         line-height:1.6em;
         list-style-type: disc;
/* missing closing } */
ol {
	counter-reset:li; /* Initiate a counter */
	margin-left:0px; /* Remove the default left margin */
	padding-left:0px; /* Remove the default left padding */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Markus]

You guys are just great. Thx so much!!! That´s it!!!

[Author]

Posts