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.
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.
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?
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:-)
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.
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:
Comments
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.
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
OK, thanks for the hints about what you have done exactly.
So in the theme, in style.css line ~3645 there is such style: 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.
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?
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:
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: replace with This way Elementor styles should take higher priority.
With kind regards.
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
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:
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!