How PX, EM, REM, %, VW, VH Work In Elementor

Elementor, a popular website builder, supports various units of measurement like px, em, rem, and vw, which are commonly used in web design.

These units allow web developers to achieve precise sizing and scalability for different elements on their websites. With Elementor, users can easily control the layout and ensure responsiveness by utilizing these flexible units of measurement.

These measurements; PX (pixels), EM, REM, VW (viewport width), VH (viewport height), and percentage are standard measurements used in the web development process. 

I’m going to show you how they work and I’ll share with you which ones to use when creating responsive websites in Elementor.

Let’s get started.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along

Video: Working with PX, EM, REM, %, VW, VH in Elementor

In the Elementor Editor, I’ll select my heading (Best Digital School), then in the Edit Heading area on the left ill go to Style > Typography. Here, under the Size option, we have PX, EM, REM, and VW (00:35). 

y2Eov9Gtc6Lop9E6dQVHpZRiTnGKX55TFLZjzhcp1oaBvIwr2 qCFID4vnWwZi8j9xgukXynMxQc ugc62ugZfHHC8p2jGeIbUcZjSWJv9lPr1cQA53Cai1 mUL5FMQKtC TvJJ

The measurement options you get are different based on where you’re accessing or using the Elementor widgets. Some of the measurements are best used on specific elements/ sections.

To Read: Create a Clean Modern Elementor Info Card with Curved Shape on Hover

Working with Web Pixels (Px)

Pixels are considered absolute units, though they’re relative to the dpi and resolution of the device you’re using. However, on the device, the pixel unit is fixed, does not change based on any other element.

Using pixels can be a challenge especially when you are creating websites that are supposed to be responsive. This is because pixels maintain a specified sizing of the element as long as that is the specific number that you chose, and this won’t change based on the device your visitor is using to view your website.

Relative Measurements (%, EM, REM, VW, VH)

There are other measurements that are relative, for example: 

The EM and percentage (%) sizings are relative to the parent element.

The REM is relative to the root element; that is, the HTML tag that has been allocated to that specific element. 

The viewport width (VW) is relative to the viewport’s width, and then the viewport height (VH), which is relative to the viewport’s height. 

Unlike pixels, relative units like percentage, EM, and REM are better suited for responsive designs. In case you are creating any web projects that you want to be responsive on different devices, consider using the percentage, EM, and REM, depending on how you want them to work. 

For example, if you want something to be relative to the HTML tag, then you can use the REM, if you want something to be relative to that parent tag, then you can use the percentage or the EM.

Perhaps you have questions like;

To Read: Create a Free Sticky Transparent Header in Elementor

What are the values for the specific sizings? 

An important point to note is that different web browsers come with a default size; of 16 pixels most times, which is the default font size that will be used to display text on your website.

You can change the settings of the base HTML tag via CSS, then what you change to will become the default for your browser, and so every other time you’re going to make adjustments to your sizings, your web browser will start calculating based on what you specified as your base sizing for your web browser.

Here’s an example:

Let’s say you have 14 pixels as your base sizing for your web browser, in this case, if you have 1 EM, that means it will be 14 pixels. If you decide to use 2 EM, that means it will be 28 pixels. And if you decide to use half an EM, then that will be 7pixels, the same applies to REM (03:39).

how-px-em-rem-vw-and-vh-work-in-elementor

On the other hand, if you’re using percentages; 100% will be representing 14 pixels and 200% will be representing 28 pixels, while 50% will be representing half the 14%, which is 7 pixels (03:46). 

What’s the difference between EM and REM?

EM and REM differ in inheritance. 

REM is based on the root element, which is the HTML, and every child element that uses REM will use the HTML root size as its calculation point, regardless of whether or not a parent element has any different sizes specified.

While the EM is based on the font size of the parent element. If the parent element has a different size than the root element, then the EM calculation will be based on the parent element and not the root element. 

To Read: Free Elementor Auto Moving Background using Premium Addons

The Percentage (%), Viewport Width (VW), and Viewport Height(VH) are mostly used for margins, paddings, spacings, widths, and heights.

In this case, if I set my heading to 100 pixels (04:53), that means it will maintain the same size across all platforms, as long as it is in pixels and specified to be 100 pixels. 

7wJBb2V2LixOsQWNCLq41OAISu pGu VvQu3fn4YYMCp15Si iOxBrADhx 5NLF9C6oHNL2LgGlgd4MVYanznOhacqhmqF6d7YCrpPLcZ9iwj21XJjBhbFEN5TWUcDpdFsOC1s2

Also Read: How to Link WordPress Menu Items to Elementor Sections

In Conclusion

That’s how you can use pixels, %, EM, REM, and viewport width & height in your Elementor website. 

If you have any questions, if anything is unclear for you, or if you have a specific tutorial that you want me to make, please let me know in the comments section. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users