How can you change the root html font size (not body)? Can anyone help me with this?

Design help General
1

How can we modify the root html?

REMs units improve responsive/fluid layouts because they .

How is the base/root html set in Webflow? I want to use REMs but don’t know how to set the base html to say 62.5%.

Why REM?
One of the problems with using “em” as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em. The Problem with em-based font sizing is that the font size compounds. A list within a list isn’t 14px, it’s 20px. Go another level deeper and it’s 27px! These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect. CSS3 now has rem (“root em”) to prevent that issue.

Example
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px /
h1 { font-size: 2.4rem; } / =24px */

2 Likes
3

You had an answer from somebody 4 days ago nd I just noticed I must have accidentally deleted the comment or the user. I’m very sorry about this. Here is the message:

html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}

/* Type will scale with document */
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}

I think this code will work. Try this…!

Internet marketing | Dg sets

1 Like
4

Where do you put this code? Header or body? Do I need to add something like this as well?
I’m don’t understand this.

5

This is CSS code, it goes inside and has to be pasted in the Head section of the custom code section of your site’s admin.

6

I can’t get this to work. I’m trying to chance the default cross browser font size from 16px to 20px.