CSS to reduce h1-h6 top padding

Support
#1

What would the best css be to reduce the padding on top of the h1-h6? It seems that there must be more padding on top then below because there is frequently a lot more space above header text than below it.
This happens on all of the websites. I use the Pro and X Theme which are my all time favorite themes.
To reference a site, I have started https://www.jkdumptrucks.com/ and you can see that the black background rows have H2 and H3 text and it sits low in the row rather than centered. Also the widget headings for footer widget 3 is much lower than footer widget 1 and 2. I think that is because of the padding on top of the header text.
What css would reduce the top padding from 1.25 to around .8 and what css would make the padding the same for the top padding and bottom padding?
Thanks,
Jon

#2

Hello Jon,

Thanks for writing in!

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

This is what I am seeing when using the Dev Tool in your site checking the headings:

Screen Shot 2022-08-27 at 10.38.45 AM
Screen Shot 2022-08-27 at 10.38.45 AM2484×874 421 KB

The headings have this custom CSS margins:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 1.25em 0 .2em;
}

You can override the built-in CSS code by modifying the top margin of the headings. It may look like this:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0em;
}

Screen Shot 2022-08-27 at 10.43.31 AM
Screen Shot 2022-08-27 at 10.43.31 AM1844×880 273 KB

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

#3

Perfect. Thank you very much! I will be using that CSS on several sites.

#4

Hey Jon,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.