Before you ask please READ THIS

Font size depending on device

in Rife Posts: 52
Can I change the font size depending on which device type is being used?

There are words, too large for mobile devices, when used in H1 titles - I can scale them manually but I'm wondering if there a global way of doing this. That way I will also have a more consistent look across the site.


  • Nevermind - I found something and it's apparantly, it's fairly easy to do with CSS :)
  • AirAir
    Posts: 10,732
    Hey :-)

    If H1 are inserted in content then they are controlled by Elementor. However, if you mean title-bars from the theme then there is a setting for it in Customizing → General settings → Headings → Main titles : Font size - on mobile devices.

    With kind regards.
  • Yeah, I did mean H1 in the content. But it's Ok, I'm just sizing manually with Elementor.

  • edited January 2021 Posts: 89
    In order to not blow up the support forum, I'm adding similar question to this thread.

    Thus, if I need to define precisely, I should use Elementor for more sophisticated settings?

    I don’t get fully how font sizes of headings can be adjusted. Within Customizing > General settings > Headings I can define „Font weight“, „Uppercase“ et cetera, while "Main titles: Font size“ and „Main titles: Font sizes - on mobile devices“ seem to be w/o any effect. I do have H1 and H2 headings visible on a sample page. But adjusting the font size has simply no effect to them. Thus I’ve tried it with custom CSS to adjust H1 and H2. While e.g. code h2 {font-family: Arial;} works fine, h2 {font-size: 12px;} seems to be ignored? I don’t understand what I am doing wrong.

    Last but not least: What is your advise / best practice for defining fonts and font-size so that its coded nice? I understand the general over-ruling principle in terms of CSS applied in Rife Pro based on the documentation (e.g. main theme is overruled by child theme, which is overruled by Elementor, which finally gets overruled by „Custom CSS“). But I’m wondering what is the smartest way in terms of best coding? Is Elementor truely writing nice code or does it code like once MS Frontpage used to code (= shitty)?

    Thanks for help and a guiding hand on de-puzzling the complexity of headings font sizes.

    Post edited by MLG76 on
  • AirAir
    Posts: 10,732
    Hey :-)

    If you ask me, Elementor makes a good job with CSS code when being such a flexible page builder.
    Higher flexibility, always bring more complex CSS rules, even more in such environment as WordPress where there are many plugins, then can affect the final effect.

    As for heading sizes.
    The theme has its sizes defined in the main CSS file. There are no individual settings for each size, as Rife was created when users in 99% of cases use page builders, like Elementor, and it seemed redundant.

    If your content is made in Elementor, you should focus on its settings and styles, and there do the changes. So best will be to work with Elementor settings.

    MLG76 said: What is your advise / best practice for defining fonts and font-size so that its coded nice?
    I loved a nice code. But now it seems it just have to work :-) So do what is working, do not overthink it. This is my(not best) advice.

    With kind regards.
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!