Change default font size on mobile

I have used the Webflow Style Guide to create my own style guide. As I figure out my content and design I go back to the style guide and change the “All

Headings” for example.

I’m using em as font size.

I would like to make the default H1 on mobile a bit smaller (probably the H2 size on desktop). Is that possible??


Here is my site Read-Only: https://preview.webflow.com/preview/sebacic?utm_medium=preview_link&utm_source=designer&utm_content=sebacic&preview=7ead76beb05adaa505929470e71e2eb3&pageId=5d30a2b575ae2c3e704b203a&mode=preview
(how to share your site Read-Only link)

Of course! The way to do that is to go down the different views at the top of the page, they go from desktop to mobile, and select ‘mobile’. Then, in mobile view, you select all h1 headings (or a custom H1 if you’ve got that set up) and apply the new size. That’s all, that way the font size for your H1 will stay the same on desktop and tablet and be smaller on mobile.
Let us know if you’ve got more questions. That’s what we’re here for.

1 Like

You can also change your base font size on the body for mobile since you are using ems. That will scale the other elements automatically.

1 Like

Yep, pretty sure I tried that, and for some reason it wasn’t “sticking”. All good now!

1 Like

But that there is pure magic!!!