In this tutorial, I’ll explain to you how PX, EM, REM, %, VW, and VH measurements work in Elementor.
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).
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).
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: Elementor Landing Page – A Step by Step Guide
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.
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.
