I've been adjusting the typography settings, but I'm looking for a way to automatically add white space under my headings (h1, h2, h3, etc). And above for everything except h1.
I tried to achieve that by altering the line height, but that doesn't give me the desired result.
I'd like to have 2 'lines' of white space above each heading, and 1 (maybe 2) line(s) of white space under each heading.
Is there any way to achieve that for all the copy on my website?
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
This should not be an issue, but you can replace all the previously shared ones with this one and it will achieve the same thing.
/*Add spacing to the top and bottom of headers*/
h2 {
margin-top: 20px;
margin-bottom: 20px;
}
h1 {
margin-top: 25px !important;
margin-bottom: 25px !important;
}
/*Add spacing to the bottom of bullets*/
.main-content ul li{
margin-bottom: 30px;
}
Hello
I've been adjusting the typography settings, but I'm looking for a way to automatically add white space under my headings (h1, h2, h3, etc). And above for everything except h1.
I tried to achieve that by altering the line height, but that doesn't give me the desired result.
I'd like to have 2 'lines' of white space above each heading, and 1 (maybe 2) line(s) of white space under each heading.
Is there any way to achieve that for all the copy on my website?
Thank you very much!
Here's an example of what it's like now.
Attached files: Knipsel2.JPG
Hello Shana,
Thanks for writing to us.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
h2 { margin-bottom: 20px; } h1 { margin-bottom: 25px !important; }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Thank you, Judith! It looks a lot better now.
What should I do if I also want to add some space to the top of each h1, h2 etc?
And second question, but related: how do I add more space under each line that has a bullet point?
Thank you!
Hi Shana,
Thank you for getting back to us.
You can add the CSS below to add spacing to the top of the headers
/*Add spacing to the top of headers*/ h2 { margin-top: 20px; } h1 { margin-top: 25px !important; }As for the bullets, try adding this CSS:
/*Add spacing to the bottom of bullets*/ .main-content ul li{ margin-bottom: 30px; }Try this and let us know how it goes.
Kind regards,
Thanks a lot, Andrew!
In the CSS there's this message though: 'header h1 has already been defined' (same for the other headers).
That's probably caused by the earlier code I used to add white space below the headings.
Is this a problem, you think?
Hi Shana,
Thank you for getting back to us.
This should not be an issue, but you can replace all the previously shared ones with this one and it will achieve the same thing.
/*Add spacing to the top and bottom of headers*/ h2 { margin-top: 20px; margin-bottom: 20px; } h1 { margin-top: 25px !important; margin-bottom: 25px !important; } /*Add spacing to the bottom of bullets*/ .main-content ul li{ margin-bottom: 30px; }Try this and let us know how it goes.
Kind regards,