Elementor Responsive

Elementor Page Break
Elementor Responsive Background
Elementor Responsive Text Size

Currently in Elementor we have multiple ways to size our text. We can choose between px, em, and rem which is great when used properly.

How to apply different font size based on different screen sizes? Sometimes the headlines and texts look great in Desktop, but in smaller devices they are too big. You can set a different font-size for different mobile devices. You can change the Line-Height and Letter Spacing for smaller devices as well. In order to change font-sizes based different screen sizes: 1. Add a new page.
Download and install ARVE Advanced Responsive Video Embedder WordPress plugin for free. It is a free plugin and you can install this plugin from WordPress plugin repository. In Elementor page builder there is a free module available – shortcode module. With shortcode module you can insert any 3rd party plugin shortcode and Elementor will parse it.

Because Elementor only lets use adjust between desktop, mobile and tablet working with large text can be an issue due to the amount of devices that fall in between desktop and tablet view points.

With EM and REM sizing not working as they should you can’t take advantage of their responsive power. This is how em and rem sizing looks within Elementor.

But when em and rem are used properly you can achieve responsive and flexible Large Text based on view width ( vw ) in which case would solve most of the issues pertaining to Large Text across different device sizes.

You can use Elementor’s built-in Responsive Mode to preview how your layout will render across non-desktop devices. To access this mode, select the Responsive Mode icon at the bottom of the Elementor Panel and click Tablet: The image, column, and hotspot should resize automatically for the smaller screens. Responsive, Mobile Optimized Fully Responsive Widgets, Blocks. We optimized all the widgets as responsive, so Droit Elementor Addons functions across all devices seamlessly. Build your webpage with our widgets and Droit Addons does the rest.

Let’s Begin

In order for em and rem to work effectively the parent section needs to have a set font size. So we need to add a special class and some CSS to the main section containing your large text.

Elementor Page Break

Add this class in the advanced part of the section:

Add this css in the CSS portion of that section:

Now all that is needed is to change your text size to em and configure to your liking.

The Result

Normally for tablet and mobile this is not an issue so I would continue to use pixels ( px ). So be sure to toggle tablet and mobile view to adjust the size of your text in pixels.

Maybe one day we will get an option to choose our text size by vw.

Hope you found this useful 😀.