Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW - WordPress

Introduction

This tutorial aims to clarify the various CSS units used in Elementor—specifically pixels (PX), REM, EM, percentages (%), viewport height (VH), and viewport width (VW). Understanding when and how to use these units is essential for creating responsive and visually appealing websites.

Step 1: Understanding Pixels

• Pixels are an absolute unit, meaning they appear the same across all devices.
• Use pixels for:
  • Icon sizes
  • Image heights
  • Padding and margins
  • Border radii and drop shadows
• Recommended for achieving consistency when you want elements to look identical on every screen.
• Despite their utility, avoid relying solely on pixels due to varying screen sizes.

Step 2: Using Percentages

• Percentages are based on the size of the parent element, making them ideal for responsive design.
• Utilize percentages for:
  • Padding: This will decrease as the parent container shrinks.
  • Margins: Ensures proportional spacing as screen size changes.
• Example:
  • If the parent container width is set to 1000 pixels, a padding of 10% equals 100 pixels. If the parent width changes to 500 pixels, the same padding now equals 50 pixels.
• Recommended settings for large containers:
  • 5% padding on left and right
  • 10% top and bottom for desktop
  • 15% top and bottom for tablet
  • 20% top and bottom for mobile

Step 3: Implementing Viewport Units

• Viewport height (VH) and viewport width (VW) are relative to the browser window size.
• Use VH and VW to:
  • Ensure elements take a specific portion of the viewport.
  • Example: Setting a section's minimum height to 100 VH will fill the entire viewport.
• While useful for full-width sections, these units are generally less preferred for overall website width.

Step 4: Understanding REM

• REM (Root EM) is based on the font size set in the HTML (default is 16 pixels).
• Advantages of using REM:
  • Better accessibility: Adapts to user preferences for font size.
  • Easier to calculate proportions compared to pixels.
• Recommended uses:
  • Font sizes
  • Padding and margins
• Example conversions:
  • 1 REM = 16 pixels
  • 2 REM = 32 pixels
• Note: REM does not scale with screen size.

Step 5: Understanding EM

• EM is based on the font size of the parent element, which can lead to complications.
• Best practices for using EM:
  • Ideal for line height: It maintains the proportion relative to the font size.
  • Good for button padding: Ensures padding scales with the font size of the button.
• Example:
  • Setting a line height of 1.5 EM means it will always be 150% of the font size.

Conclusion

In summary, when designing with Elementor:

• Use pixels for fixed sizes and consistency.
• Use percentages for responsive padding and margins.
• Utilize VH and VW for sections that need to adapt to viewport sizes.
• Prefer REM for font sizes and some spacing for better accessibility.
• Use EM primarily for line heights and button padding for scalability.

By understanding these units and their applications, you can enhance your web design workflow and create more responsive websites. For further learning, consider exploring specific Elementor functionalities or CSS techniques.