Line height class

Support
#1

Hello

I am trying to create a class that will allow me to have custom line height specified but only apply it to specific posts

I tried using this in the global CSS but I was unable to adapt it to properly be recognized as a class and thus it effected all body text globally

body {
line-height: 1.5em;
}

How can I modify this to create a class that I can apply to individual posts to change their line spacing?

#2

Hello There,

Thanks for writing in!

You can make use of this code to apply in the posts or page:

.custom-lineheight {
   line-height: 1.5em !important;
}

The !important will force it to be applied. In the any of the elements like the heading tags eg h1 is present in the content, it might not get affected because it has its own line height settings. Mostly, p tags and some other content will apply this code.

Hope this helps. Please let us know how it goes.

#3

Hello

Thank you so much for this. How would I add line height information to this class that specifically addresses text with header tags ie h1 h2 etc?

#4

Hi there,

You can add it directly to the header elements like this:

h1 {
    line-height: 1.8em !important;
}

h2 {
    line-height: 1.7em !important;
}

h3 {
    line-height: 1.6em !important;
}

h4 {
    line-height: 1.5em !important;
}

h5 {
    line-height: 1.4em !important;
}

h6 {
    line-height: 1.3em !important;
}

Hope this helps.

1 Like