[Resolved] Elementor headings not inheriting GeneratePress's line-height styles

[Gerard]

Following this previous topic: https://generatepress.com/forums/topic/line-height-issues-after-elementor-update/

Elementor plugin can inherit the styles from the current theme (GeneratePress in this case), but the line-height for headings is not being inherited.

First computed line-height style: from GeneratePress
Second computed line-height style: from Elementor’s line-height: 1;
Third and last computed line-height style: from the code suggested in the previous post .elementor-widget-heading .elementor-heading-title{line-height: inherit;}

The problem with the last piece of code is that it doesn’t make headings inherit GP’s headings line-height, just their parent’s line-height as far as I know. And without that, line-height will be just 1.

Another question is why GeneratePress only allows to set line-height in em units and not also in px. That adds some complications when using tools such as Golden Ratio Typography.

[David]

Hi there,

The inherit CSS fix from Elementor was never going to work correctly. Looks like they have added more HTML to the element since then which is why it doesn’t work at all.

Instead you would need to add your own very specific CSS to overwrite Elementors eg.

.elementor-widget-heading h1.elementor-heading-title{
    line-height: 1.3em !important;
}
.elementor-widget-heading h2.elementor-heading-title{
    line-height: 1.35em !important;
}

EM units for line height is the standard, which is why we probably never added pixels.
Converting PX to Line-height is just a case of dividing the line-height by the font size.

[Gerard]

Hi David,

Instead you would need to add your own very specific CSS to overwrite Elementors

That’s what I’m currently doing. Unfortunately, that kinda defeats the purpose of inheriting the styles from the theme, as it adds more things to maintain.

Wouldn’t it be possible for GeneratePress’s and Elementor’s teams to find a solution together? It’s a very popular combination of theme + page builder and I think it would be worth it to work on this compatibilities.

EM units for line height is the standard, which is why we probably never added pixels.
Converting PX to Line-height is just a case of dividing the line-height by the font size.

I get it, but why don’t let us write which units do we want to use? The input field is already there, but cannot be edited. I would really like to not have to write something like “1,6428571428571428571428571428571em” if I want to set a line-height of 69 for a font-size of 42.

[David]

The solution at the time was for Elementor to remove their class specific CSS from the headings – since then there has been many github issues raised withe Elementor. Just google – github elementor line-height to see the amount of requests. None of which have lead to a commit that will fix the problem.

As much as we would like to see this fixed for our users it is out of our control. Adding plugin specific CSS to the theme is not an approach we would take as this leads to redundant code in the theme. It really is for Elementor to fix and no amount of us Theme developers raising the issue has managed to achieve that.

I see what you mean about EMs and PXs – can’t promise we will add it but ill add it to the wish list.

[Gerard]

Thanks David, now I see that it’s all on Elementor, I thought it was happening only when in combination with GP theme.

And it would be great that you could let us choose which units do we want to use in a future update, thanks.

[David]

You’re welcome 🙂

[Author]

Posts