Before you ask please READ THIS

[Elementor] Site settings typography settings not correct

edited February 2 in Rife Posts: 36
Hello from Germany,

I currently have the problem that when I configure the headings in the theme style (website settings), these settings are not displayed to me in the browser.

Example:
In the site settings I specify in the theme style: h2 = 42 px - all good in the backend, but not in the frontend. There it is displayed much much smaller.
If I specify the font sizes manually, it works without problems.

The fonts are used with Adobe Typekit. But the problem also occurs with the default fonts.

If I set the default layout to "Elementor Canvas", everything displays correctly. When I set it back to "Theme", the display problems are back.

The site is not live yet, so I can't post a link. :-/

In the forum of Elementor they could not help me for days either. :-(

Tested in Chome, Firefox, Explorer - always the latest version.
Elementor (Pro) is also up to date with version 3.1.1 (3.0.10)
2 monitors: 1st monitor: 3840 x 2160 (4k) / 2nd monitor: 1980x1080 - again no change.

Best regards and many thanks!
mindkicks
Post edited by mindkicks on

Comments

  • AirAir
    Posts: 10,660
    Hey again :-)

    Without live link, or just accessible by internet(under maintenance mode or something), I will not be able to help you solve it.

    What I suspect is a cascade of styles is affecting each other, and the specificity of styles, plus order of them, hurts your results.

    So in simple words: it is CSS issue, that your selector is probably too weak.

    I have to see it live to give you proper cure.

    1. By the way how does look your CSS that you have added for h2?
    2. Is your title also a link?

    With kind regards.
  • Posts: 36
    Hey :)

    Thanks for your quick help - again. :)
    I have actually only created the fonts, colors & co. in the Site settings in the Theme Style of Elementor and nowhere else.
    So I have not defined anything via css. The headings, whether h1, h2 or other, are not links, always just text.

    Does this help? :-(

    Unfortunately the site is not live yet. Let's see if I can put a page online somehow. But can not promise it.


    Best regards
  • AirAir
    Posts: 10,660
    Hey :-)

    OK, thanks for the hints about what you have done exactly.
    So in the theme, in style.css line ~3645 there is such style:
    
    .real-content h2 {
        font-size: 2em;
        line-height: 1.1;
    }
    It prevents those changes that you make going live.

    You can either take this CSS and copy it into custom CSS field, and use it for your changes.

    OR you can remove above mentioned CSS from the theme's style.css. However, it will only work fine till the next theme update.

    Same you can do for other heading sizes.

    With kind regards.
  • edited February 3 Posts: 36
    Thank you! :)

    If I adjust it, so do not delete, it is then also overwritten in the next update?

    //
    I have now adjusted the h1-h4 in the style.css as I have it in the theme style at Elementor.

    Nevertheless it remains unchanged. :-(
    Cache etc. I have all deleted.

    Maybe these screenshots will help.

    1. defined styles in theme style
    https://s1.imagebanana.com/file/210203/9zXtxg1m.jpg

    2. frontend view
    https://s1.imagebanana.com/file/210203/EegIhJs6.jpg


    What really amazes me is that if I change the default page layout of a page to "Elementor Canvas", then everything is displayed correctly. If I change it back to "Theme", it does not. So it must be the theme or a problem between theme and Elementor or?
    Post edited by mindkicks on
  • AirAir
    Posts: 10,660
    Hey :-)

    I wouldn't say it is a "problem" :-)
    Theme need to define styles for heading as not everyone is using Elementor or any page builder at all :-)

    What happens is, Elementor CSS that it creates from your setting has "weak" CSS selector.
    Because of that theme CSS selector for heading has higher priority.

    So yes, disabling the whole theme styles(canvas mode) removes any interference from the theme.

    I could make the theme CSS selector much weaker for the next update, but I need to make sure it will not have too many implications for other users.

    ---
    Back to current situation:
    mindkicks said: I have now adjusted the h1-h4 in the style.css as I have it in the theme style at Elementor.

    Nevertheless it remains unchanged. :-(
    Cache etc. I have all deleted.
    Live link would help a lot currently, to not guess what did work and what didn't ;-)

    Maybe you could try the "weak" CSS selector solution:-)

    Try such change in style.css ~3631 replace:
    .real-content h6{
    	font-size: 1em;
    }
    .real-content h5{
    	font-size: 1.1em;
    }
    .real-content h4{
    	font-size: 1.2em;
    	line-height: 1.22;
    }
    .real-content h3{
    	font-size: 1.625em;
    	line-height: 1.15;
    }
    .real-content h2{
    	font-size: 2em;
    	line-height: 1.1;
    }
    .real-content h1{
    	font-size: 2.2em;
    	line-height: 1.05;
    }
    replace with
    h6{
    	font-size: 1em;
    }
    h5{
    	font-size: 1.1em;
    }
    h4{
    	font-size: 1.2em;
    	line-height: 1.22;
    }
    h3{
    	font-size: 1.625em;
    	line-height: 1.15;
    }
    h2{
    	font-size: 2em;
    	line-height: 1.1;
    }
    h1{
    	font-size: 2.2em;
    	line-height: 1.05;
    }
    This way Elementor styles should take higher priority.


    With kind regards.
  • Posts: 36
    Thanks again for your help! :)

    I did it as you said, but unfortunately it does not change anything.
    Have times the whole thing recorded as a video, maybe that helps you. 🙇🏼‍♂️
    The page is just local at the moment.

    https://streamable.com/lqzria
  • AirAir
    Posts: 10,660
    Thanks for the video.
    I have done exactly the same thing as in your video, and it works fine for me.

    I suspect something else is acting here, like copied styles, or some other plugin. You can investigate this h2 title with firefox console, and show me the right side, like on my screenshot below:
    image
    screen.png
    1594 x 976 - 61K
  • Hello,

    sorry for the late reply.
    I have been uninstalling and testing plugins one by one. Currently it works. Hope it stays like this.
    Thanks again! :)
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!