Support » Plugin: Elementor Page Builder » Line heights set on Elementor stylesheet set to 1

  • Resolved clickharder

    (@clickharder)


    I am running Elementor 2.5.12

    The frontend minimized stylesheet (frontend.min.css) has the following style:

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

    This is overwriting my themes ability to set the line height for titles. Wouldn’t be a problem but my theme allows me to easily set the line-height but it doesn’t allow the “!important” to prevent Elementor from overwriting it.

    Is that a new addition to the stylesheet? I don’t recall having this trouble setting line-heights on headers in the page.

Viewing 7 replies - 1 through 7 (of 7 total)
  • I don’t know if that’s a new addition or not, but couldn’t you just override in Customizer > Additional CSS? Regardless of what setting the theme has, you should be able to add that exact rule there with a different number and the !important, in the Additional CSS.

    Yes and no. I can override it in the child theme stylesheet but that isn’t ideal for my scenario. My theme allows me to set line heights for all of the headers and body text inside WordPress. However, those styles are loaded prior to Elementor’s styles. So Elementor’s styles override my themes styles. The theme doesn’t use “important”, and if I update that in the parent theme, the update will go away at next update.

    Maybe there is a reason, but isn’t the line-height set to “1” by default? Why would Elementor add that as it does force the extra step of overriding.

    Honestly, I don’t know what a typical default line-height is for a heading, but I can imagine 1.5 might be reasonable since it’s a heading. I don’t have a better answer for you, I’m sorry. I would just throw it into the child theme stylesheet, personally, but I understand that’s not ideal for you. Sorry I can’t be more help.

    Unfortunately I have the same problem. If setting the style globally to

    line-height: 1.5 !important

    custom rules from made with Elementor are ignored. Without !important my rule has the rule aboce is ignored because Elementor’s global CSS loads after my theme’s stylesheet…

    How did you solve this problem?

    I have found that I can set the line-height in my child theme without using !important.

    However, I find the need to do so really annoying considering there is no reason for Elementor to set a default line-height in the style sheet. It serves no value. Here is why (if anyone from Elementor is listening…)

    1) Case 1, theme sets line-height dynamically. If this code is loaded prior to Elementor, you are overriding the theme which should provide the default styles. This requires an additional line of code to be written to nullify a line of code that isn’t necessary.

    2) Case 2, theme doesn’t set a line height. The text may look funny if the theme doesn’t set a line height or sets a line-height that is inappropriate causing weird text spacing. No problem! Elementor has a handy typography setting that allows you to override line-heights for the element.

    3) Case 3, theme or child theme has line-heights specified. Assuming this is loaded after Elementor styles are loaded, the Elementor styles are overwritten and the styles are just useless bytes.

    So in 2 of the 3 cases, the line-height is useless code. In one case, Elementor already provides a way to correct for any issues.

    I just noticed that this is marked “resolved”. Did Elementor eliminate the line height style in a recent update? Otherwise I would argue that it is still unresolved.

    lineheight is still there in version 2.6 (basic) and version 2.5.12 (pro).
    I totally agree with you on the points mentioned above. It is really annoying to get rid of these useless options… :-/

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.