TDV M184 02 scaled 1

Elementor: how to use sizing options

Elementor is one of the most popular page builders, and if you decide to use it you are sure to have come across its various sizing options. In today’s article we will explain how to use the sizing options on Elementor.

Let’s start with the basics…

In CSS, you can specify dimensions or lengths of elements using various units of measurement. The units you will find in some Elementor options include PX, EM, REM, %, VW and VH, although there are many others available in CSS. Not all Elementor elements will offer all of these units. Elementor presents only those options that make the most sense for the given element.

The most important aspect to know is that among the different units, some, such as PX, are absolute units, and others are relative units.

Absolute units

PX: Pixels (px) are considered absolute units, although they are relative to the DPI and resolution of the display device. But on the device itself, the PX unit is fixed and does not change based on other elements. Using PXs can be problematic for responsive sites, but they are useful for maintaining consistent sizing for certain elements. If you have elements that should not be resized, using PX is a good choice.

Related units

EM: is relative to the parent element

REM: is relative to the root element (HTML tag)

%: is relative to the parent element

VW: is relative to the width of the window

VH: is relative to the height of the window

Unlike PX, relative units such as %, EM, and REM are more suitable for responsive design. Relative units scale better on different devices because they can scale up and down based on the size of another element.

Here is explained with a simple example:

In most browsers, the default font size is 16px. Relative units calculate dimensions from this base. If you change that base by setting a base size for the HTML tag via CSS, it becomes the basis for calculating the relative units on the rest of the page. Similarly, if a user adjusts the font size, this becomes the basis for calculating relative units.

So how do these units work when it comes to the default value of 16px?

The specified number will multiply that number by the default size.

1em = 16px (1 * 16)

2em = 32px (2 * 16)

.5em = 8px (.5 * 16)

1rem = 16px

2rem = 32px

.5rem = 8px

100% = 16px

200% = 32px

50% = 8px

But what happens if you change the default size?
Since these are relative units, the final dimension values will be based on the new base dimension. Although the default is 16px, if this is changed to 14px the dimensions will end up being based on the new one.

What is the difference between EM and REM?

Seeing the calculations made above it would seem that these are equal. So how do they change?

Simply put, they differ on the basis of inheritance. As mentioned, REM is based on the root element (HTML). Any child element using REM will then use the HTML root size as the calculation point, regardless of whether a parent element has a different size or not.

EM, on the other hand, is based on the font size of the parent element. If a parent element has a different size from the root element, the EM calculation will be based on the parent element.

What about the %, VW and VH? What is it all about?

The main difference is that these are used for element spacing and sizing compared to the others seen before that are used primarily for fonts.

To reiterate, VH stands for “viewport height,” which is the height of the viewable screen. 100VH would represent 100% of the window height or the entire screen height. And, of course, VW stands for “viewport width,” which is the width of the viewable screen. 100VW would represent 100% of the window width or the entire width of the screen. % reflects a percentage of the size of the parent element, regardless of the size of the window.

Where are the %, VW, and VH options used?

Column width: If you change the layout of an Elementor column, it makes only one width sizing unit available – %. Column widths work well and responsively only when percentages are used; therefore, no other option is provided.

Margins: the margins of a section can be specified in PX or %. Using % is usually preferred to ensure that the margins are not larger than the content when resizing for a mobile device, for example. By using a percentage of the width of the device, your margins will remain relative to the size of the content, which is almost always better.

Padding: the padding of a section can be specified in PX, EM or %.
As with margins, it is often preferable to use EM or % so that padding remains relative to the scale size of the page.

Often the key to solving responsive problems is to use EM, REM, or VW instead of PXs.
Obviously, the choice always goes according to the situations we find ourselves in, but if you have the chance we recommend that you use the relative options, also based on what we explained today.

If you found the article useful share it and follow us on our social media!