Line-height property on Heading widget

[tudormnt]

There is a possibly useless specification of the line height on the .elementor-widget-heading .elementor-heading-title selector in the main front-end css file. The line-height is set to 1.

That causes all styles that target headings (h1, h2 etc.) to be overridden by this property and it is impossible to fix since class selectors superceed element selectors and the class is on the actual heading element.

Is there any reason why this is necessary? The heading should inherit the line-height from the theme which in all cases is specified using the simple html tag selector, without any class.

Thanks!

[bainternet]

@tudormnt

I don't understand what you mean because if you set the line hight for a heading widget specifically it will be set on the front end.

please explain what the issue is?

[black-eye]

I think @tudormnt means, that the .elementor-heading-title CSS overrides the line-height value, which is already specified by the theme.

I'm facing the same problem: in every custom theme I have to override this value back with extra CSS. It's doable and it's no big deal, but if it isn't necessary, it would be better to use the value inherited from the theme.

Of course I could specify the new value in the widget in the editor, but that would be a lot of redundant work.

[tudormnt]

@bainternet I mean exactly what @black-eye explained.
Of course you can override the line-height from the typography control but Elementor should inherit this from the theme and only override through the widget settings whenever required.

Moreover, headings will almost NEVER have a line-height of 1 in professionally designed websites. That is a very low value. Almost all fonts require a bigger value for better legibility.

I was hoping you could explain why this is set in the first place since it seems it's not needed. Can we get an answer for that, please?

[bainternet]

@black-eye Thanks,

@tudormnt,

I see what you mean and I do see how its problematic. Sadly its something we are carrying form the early versions of Elementor which means it runs on (currently) 475,000 sites and removing that will change/break layouts on these sites.

We did have some brainstorming sessions here about this and some other issue that came up, and we will have to address this and more once we provide a "theme builder"...

Think about a case when a user uses the theme builder and his theme has no typography to inherit...

So this will probably end up being something like a global Typography settings module.

Thanks for the feedback.

[ianstudio]

@ black-eye (or anyone who has an answer..)
Hi, how do you override this with css ?

I tried this but neither works :/

h1, h2, h3, h4, h5, h6 {
line-height: inherit !important;
}
.elementor-widget-heading .elementor-heading-title {
line-height: inherit;
}

T H A N K S

[black-eye]

@ianstudio
I'm afraid inherit won't work here. There's no parent you could inherit desired setting from. Theme's settings were made on the very same Hx Elementor has overriden and we all are trying to override back. We would need some rule to inherit an ancesting rule in cascade flow or something like that.

Unfortunately, you have to set the specific values for each heading (again). That is why this is such a huge pain.

[ianstudio]

THX. For now I've replaced some headings with third-party ones, so as to cover my a**

[shaneonabike]

Personally, I think that if there is nothing set in the heading it should just not output anything. Presently, if you don't set anything (cause you setup some defaults in your stylesheet) it still renders

.elementor-widget-heading .elementor-heading-title { padding: 0; margin: 0; line-height: 1; }

Which seems odd to me. On all the other elementor items if you don't set something it just doesn't output it. My use case is to reduce the complexity of the style sheet to increase Google ratings so having multiple really detailed selectors instead of just saying "Use the H2 style" seems to cause Google to be angry and complain about too big of sheets...booo

[shaneonabike]

Also if you are worried about the historical reference just chuck the code directly in your elementor-basic theme. Chances are that most people are overriding this anyway

[pensierinmusica]

@kobizz @KingYes @matipojo @arielk guys any update on this?

This fetaure is absurd. Elementor should inherit line-height for headings from the theme settings. At least when "Disable Default Fonts" is ticked in Elementor settings.

Can you please fix it asap?

Thx!

[puregraphx]

just
.elementor-widget-heading .elementor-heading-title {line-height: inherit;}
does actually work and it has been Elementor's own solution.

[Alipio123]

This is how I fixed the problem using Astra theme.
You can use this code in any theme, just make sure you change the code in line 14-19
https://gist.github.com/Alipio123/a196e1b369ee5dac61aeaba4ae4e1faf

[simonclay]

Really helpful @Alipio123 thank you!

Both threads have been closed, but has it been resolved?

[Alipio123]

Really helpful @Alipio123 thank you!

Both threads have been closed, but has it been resolved?

I think they dont plan to implement this because like they said, elementor already been using by millions of user and this changes will gradually affect their site.

I really dont like this reason because its easy to hire developer or if they already change the line height in the elementor it will not change a thing..

[teoeugene]

I thought Astra was buggy when I couldn't adjust the line-height of the headings.

Thanks @Alipio123 for the fix. This shouldn't be needed if not for Elementor's ridiculous reason for including a fixed line-height in the heading.

[drawcard]

Adding my voice to the frustration here. I don't understand the logic in preserving this for outdated websites, while it's causing confusion for new users, and even experienced devs who are scratching their heads wondering why they can't control something as simple as line-height in their theme CSS.

Can't there be an opt-in checkbox option in Settings to insert legacy CSS, if it's needed?

[drawcard]

I have now lost the ability to set the line-height property independently in Elementor, after trying each of the fixes in this thread.

In particular adding:

.elementor-widget-heading .elementor-heading-title {
line-height: inherit;
}

to the theme's CSS (as mentioned in #6761) does not work without !important declared. This in turn prevents Elementor from overriding line-heights in Heading Widget > Style panel.

I am running a clean installation with Elementor + Elementor Hello theme on this particular instance.

I manage multiple sites running Elementor and it should not be the responsibility of the end user to maintain workarounds like this, in order to have something as basic as line-height working alongside Elementor.

@bainternet is there any chance we could have this issue re-opened, and look at the possibility of having the legacy CSS code optional somehow?

Edit: I can't adjust the line-height at all in the Text Editor widget as well.

[kaspergram]

This effectively means line-height in the theme style does not work. On a blank site with only Elementor installed and the hello theme, you're not able to set the line heights for any H elements. Why not just omit the line-height property from the theme styler? I do not affect anything, and causes confusion.

[fippy]

This is still an issue now. Global Theme Styling has been recently introduced, but the heading widget overides the global theme styling by default (ie with no styles set on the heading widget) - This behaviour is incorrect IMO. It needs looking at again I think...

[fippy]

.elementor-widget-heading .elementor-heading-title { padding: 0; margin: 0; line-height: 1; }

Is definitely the problem, it shouldn't be set up like this now you have Global Theme Styling in place.

Please fix asap

elementor-kit should be queued after frontend

[romapad]

+1 for fixing it! We really need line-height to work as expected! At least add option in elementor setting: remove line-heigth declaration from elementor css or keep it for legacy purpose.

Please, reopen this issue.

[black-eye]

@romapad see: #10649

[gerardreches]

+1, tired of having to edit the line-height in all my headings

[pegues]

What would be best is if you provide some kind of hook that allows us to either set alternate values, or even disable line-height as an option completely. This way you maintain your legacy support, and at the same time give access to the ability to remove or alter that option. Possible?

[black-eye]

One more think to consider. There are themes, which try to resolve this 1px line-height issue in their settings. One example is Page Builder Framework. They have an extra rule which overrides Elementor's default setting, so Elementor pages match their theme & customizer settings.

By this new rule you are breaking the backward compatibiliy with these themes (again).

So the best way would be to remove the line-height property, doesn't matter how:

1. Completely
2. By a checkbox in the settings
3. By a hook

Whatever suits you best, but please resolve it.

[MapSteps]

Hey guys,

David here with Page Builder Framework. I just quickly wanted to chime in on this.

I'm currently updating the way we override Elementors line-height defaults. In the themes css file, we're now doing this to make Elementor respect the themes default line-height:

// Default line-height fix.
// We declare headlines specifically to be able to override Elementor defaults.
// Going only for .elementor-heading-title won't work.
// Premium Add-On will override defaults again respectively if configured.
h1.elementor-heading-title, h2.elementor-heading-title, h3.elementor-heading-title, h4.elementor-heading-title, h5.elementor-heading-title, h6.elementor-heading-title {
	line-height: 1.2;
}

Then, in the Premium Add-On (which offers line-height settings for all and each headline individually, we override these values again, dynamically based on the users settings in the same fashion as shown above.

$line_height_h1 = get_theme_mod( 'page_h1_line_height' );
$line_height_h2 = get_theme_mod( 'page_h2_line_height' );
$line_height_h3 = get_theme_mod( 'page_h3_line_height' );
$line_height_h4 = get_theme_mod( 'page_h4_line_height' );
$line_height_h5 = get_theme_mod( 'page_h5_line_height' );
$line_height_h6 = get_theme_mod( 'page_h6_line_height' );

if ( $line_height_h1 ) {
	echo 'h1.elementor-heading-title, h2.elementor-heading-title, h3.elementor-heading-title, h4.elementor-heading-title, h5.elementor-heading-title, h6.elementor-heading-title {';
	echo sprintf( 'line-height: %s;', esc_attr( $line_height_h1 ) );
	echo '}';
}

if ( $line_height_h2 ) {
	echo 'h2.elementor-heading-title {';
	echo sprintf( 'line-height: %s;', esc_attr( $line_height_h2 ) );
	echo '}';
}

...

I have to say that I haven't tested this yet with Elementors new Global Theme styles but hope that other theme devs will find this useful :)

[MapSteps]

I did some further testing and with the implementation shown above, this is how things behave:

• By default, the themes line-height styles will be applied to all Elementor headlines
• Widget-specific line-height settings will always override the themes & Elementors global line-height settings
• If a line-height is set in the customizer it will override Elementors global line-height settings

The logic behind it is simple. The theme keeps its priority over the page builder but at the same time allows the user to choose where they want to manage global styles.

If line-height settings are not specifically defined in the theme, Elementors global line-height styles will take over. If on the other hand the line-height settings are specifically defined in the theme, they'll have priority over Elementors global line-height settings.

We could argue that Elementors global line-height styles should override the customizer styles but with Elementor resetting line-heights to 1, this is the more straight-forward solution imo.

[black-eye]

@MapSteps thanks for sharing your solution.

On the other hand I just don’t get, why this setting is still applied from Elementor in the first place. It makes no sense to me. Backward compatibility argument seems almost hilarious considering the epic mess introduced by the changes in version 3.0.

According to the issue #11453 the solution is hopefully planned, but it has no milestone set (was planned for 3.0.0). I hope it won’t be another partial solution as the last one, but my expetations are quite low now.

[pegues]

@black-eye if you're able to do so, I suggest making a plugin with your own custom widgets. Then, you can duplicate the Elementor Heading widget, change the class names elementor uses to fix this line-height issue and then you are back in business. Most projects I create require pretty unique widgets, which I custom develop for whatever page builder I'm working with (WPBakery/Visual Composer, Elementor, Beaver, etc) for each project.

Another reason I suggest making your own plugin, if able to do so, is even if you go the Elementor Pro route, many of their widgets lack significant features. One of which is working with post types, particularly custom post types, and meta data. The support for ACF is horrible. JetEngine is definitely a step in the right direction, but I don't like how their ecosystem takes over your entire build for a few widgets you may desire using.

I like sites lean and mean.