[Support request] Issue with CSS : html { font-size: }

Home Forums Support [Support request] Issue with CSS : html { font-size: }

Home Forums Support Issue with CSS : html { font-size: }

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #613547
    Fabien

    Hi,

    I’m currently trying to tweak a little bit my Generatepress child CSS by using

    html {
      font-size: xxxx;
    }

    where xxxx is either fixed px or a calc.

    Tried to add that in the style.css and in additional CSS, but it does not work.
    Is there anything I’m missing here ?

    Thanks

    #613579
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance why you don’t want to use the customizer option (Typography > Body)?

    Let me know 🙂

    #613658
    Fabien

    Hi, thanks for answering

    I’m aiming for viewport unit based typography and was seing html “root” setup as a reference in any source I could find. So far we are using Typography > Body, but our end goal is

    html { font-size: calc(1em + 1vw) }

    And not sure I can use calculation with typography > body

    #613737
    Leo
    Staff
    Customer Support

    Hmm try body instead of html.

    #613758
    Fabien

    Body works, but I’m actually trying to understand why everyone suggests html and it doesn’t work in generatepress !

    But yes, just tried body and it works!

    #613774
    David
    Staff
    Customer Support

    html is for the root font size which will overide that defined by the browser which is 16px which eauals 1 REM. So if you wanted to use REM sizes in your builds then html is the one to adjust.

    #614024
    Fabien

    My main issue with body is that it doesn’t seem to apply on h1,h2,h3…

    Will try with html and rem and see how it goes

    #614184
    David
    Staff
    Customer Support

    body only affects the paragraph text. H1, H2 etc are all separate tags and need to be styled separately. What are you trying to achieve? Golden Ratio modular scale? Fluid typography?

    #614458
    Fabien

    Yes, fluid typography was my idea, but I may stick to an easier solution with @media only screen.

    #614466
    David
    Staff
    Customer Support

    Fluid is good if you are working with full width sections and more ‘complex’ designs where elements are likely to be rescaled but for standard site layouts media queries are the easier to manage.

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