Lytbox Academy Logo
Lytbox Academy Logo

PX to REM the Easy Way for Elementor

Article Outline

Learn an easy hack to get started with going from PX to REM in Elementor

Why us REM for Font Sizes

Back in the days, we I used PX on everything. And it was cool, a great way to get started when building websites. But times have changed and using PX for font sizing is no longer considered accessible. In the last few years, there has been more light shined on making websites accessible and by following best practices, we can make sure our websites have a great experience for all users.

Using REM for font sizes is one of those best practices we all should be doing. In this article, I’ll show you an easy way to get started when going from PX to REM.

The challenge of using REM

By default, a browser’s root font size is 16px. This means 1 REM equals 16px. Not bad, but when you’re used to using PX and know how big your fonts should be, you may find yourself breaking out the calculator or using a 3rd party tool to figure out the conversion.

And this disrupts the workflow by causing us to deviate from our flow to calculate the changes.

The Solution: Change the browser’s root font size

If we change the default font size from 16px to 10px, well figuring out the conversion from px to REM is a breeze. 1REM = 10 px. This means 20px = 2rem, 22px = 2.2rem, 38px = 3.8rem, and so on.

How to change the browser’s root font size for Elementor

This actually works on every WordPress website no matter the page builder or theme. All we need to do is add a snippet of CSS.

Below is a CSS snippet that changes the root front size from 100% (which equals 16px). to 62.5% (equaling 10px).

Copy and paste this code snippet where you store your custom CSS. I suggest using the customize. You can find this by selecting on Appearance > Customize > Additional CSS.

html {
    font-size: 62.5%;
}

Conclusion

That’s it. Super easy. If you want to get a better understanding, checkout the video below as I walk you through the whole set up.

YouTube video

Join the Lytbox Newsletter

Blog Page Sign Up
Comments have been temporarily deactivated and are in the process of being revamped for a far better user experience and support for tutorials.
Join the Lytbox Newsletter
Blog Page Sign Up
Lytbox Academy Logo

Reset your passord

Want to login? Click here.
Lytbox Academy Logo

Log in to your account

Forgot your password? Reset here.