5/5

Responsive Large Text In Elementor

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.

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.

Text with em selected

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.

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.

Add this class in the advanced part of the section:

[css]
flexible_text
[/css]

Add this css in the CSS portion of that section:

[css]
/* This css only works on screen larger than 800px */
@media (min-width: 800px){
.flexible_text{
    font-size: 2vw;
}
}
[/css]

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 😀.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping to your Elementor site with just CSS. Here is a preview how it should function. For this to work you don’t need any kind of…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

3 Comments

  • ” Maybe one day we will get an option to choose our text size by vw ” I can find this option in elementor now. Along with px, em and rem, I see vw as well for font size. Have you tried it yet?

    Reply

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?