[chris@designwave.co.zaParticipant]

Hi guys,

I Can’t seem to change H1, H2 etc line height in Customizer with CSS. Although it works when I make the change in my Browser Inspector, once I paste the CSS across is stops working.

This is the CSS I have:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
line-height: 50px !important;
}

Any ideas?
Thanks!

[LelyModerator]

Hello Chris,

Line height will depend on the font size? Would you mind clarifying why do you want to change it’s line height? What you want to achieve so we can check and help you better? By default headings have default margins. You may add class man to reset this margins to zero and then it’s line height will decrease.
(m) – margin (a) – all (n) – none.
Please also share your site URL.

Always,
X

[chris@designwave.co.zaParticipant]

Hi guys,

Thanks for the reply!

Here is the dev URL: http://dev.hatfield.co.za.www54.jnb2.host-h.net/

My client has requested that the line height (50px) that I have manually added to the introduction paragraph (below the rotating icons) be the same throughout the website.

AKA: 50px default line height on all Headings from here on out.

Is this possible with the Customizer or will I have to add manually every time?

[Paul RModerator]

Hi Chris,

Your code is not working because there is a missing close curly bracket in your custom > css

Please change the code that reads

@media (max-width: 600px) {
   .x-brand {
      width: 150px; 
   }

with this

@media (max-width: 600px) {
   .x-brand {
      width: 150px; 
   }
}

Notice I added an additional bracket at the end.

After adding that your code to adjust the line height should work

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   line-height: 50px !important;
}

Hope that helps.

[chris@designwave.co.zaParticipant]

You sir, are fantastic!

Thank you, I was JUST starting to wonder why my CSS wasn’t working anymore.

I appreciate the help very much 🙂
Have an awesome day!

[Prasant RaiModerator]

You are most welcome. ☺

[Author]

Posts