Understand EM & REM Font Size for Elementor and what is the Parent and the Root HTML? 

If you like what you see - then please do Like and Share! And if you don't - then let me know - because we always want to improve.

Spent many weeks fudging around, well done

Thank you for making these advanced Elementor/CSS tuts, we are an underserved niche!

Hi Imran. This is probably not a typical comment you receive, but here goes. I am turning 75 this December and live in Florida with my wife of 45 years. We have four children and six grandchildren. My wife taught elementary school-aged special needs children when we lived in Nashville, Tennessee (this will all come together eventually). I am a retired computer programmer and web developer and took many live and online training classes during my working career. I was a Divi subscriber for two years and watched tons of Divi tutorials on RU-vid during that time. About a year ago or so, I switched over to Elementor and recently upgraded to Elementor Pro. Considering all the live and online classes, training, and tutorials I've had over decades, including all of the Divi and Elementor tutorials I've viewed, you are one of the best, most gifted teachers I've ever encountered. I think you would make an exceptional school teacher, and I mean very exceptional. I wish all of my school teachers could have been like you. I know I would have done so much better. You make learning fun and informative. Please, if you ever encounter any opportunities to exercise your exceptional teaching gift with school-aged children, don't pass them by. You, and the children, will be greatly enriched as a result. May God richly bless you.

BEST video explaining EM and REM in Elementor - thanks for explaining where the Parent and Root are controlled from. Much appreciated!! Subb'd

You give me what I looked for, greaaat

Brilliant! Simply Brilliant!

Finally, thank you so much, a very important video! Now I have an idea of why and where these settings are useful. I have been using REM without knowing why.

This is really helpful

(Girly Screams Happiness) Thank you so much . I have spent weeks correcting for desk top to phone.

How did I miss this?! There should be plenty of shiny happy people switching to REM after this video...

This is the first time these concepts have made a bit of sense to me. Thank you so much!

Holy Crap... thanks Imran that makes so much sense finally!! Great video, really easy to follow :)

Thanks for making this video Imran. The missing piece for me was finding what controls the EM vs REM sizing. Thanks a lot

Dude, I am loving this content!

Great explanation, thank you! Too bad I didn't find this video 10 videos ago.

Great explanation, thank you! 👍👍👍

This is amazing! Thanks! Amazing content!

you're the best brother

Thank you finally I understand it with easy way

Thx, nice video dude. Now I now the difference, and how it works together.

perfect thank you

woo I was looking for this. Now I have to redo few website I guess ^^

This is a superb video, at last someone who really tries to explain this easily........i was looking at the other video and now kinda stuck on what really are the best overall website settings for hello theme with elementor for font sizes for web please. For: H1 to H6 desktop & mobile? sizes rem / em Sub Heading heading desktop/ mobiles? em/ rem Body size desktop/mobile em/rem? i would love to know what you use as a guide line, please. Thanks for making great videos easy for us

REM is my preferred, simply because I can get more tweakability from my CSS code. Also, REM had that great song, Shiny Happy People! 😉

Not at all confusing! You made perfect sense. I do have one question though. If you don't set the root in your CSS, does it just get it from the person's browser? And would this be a preferred way of doing it?

Great video! Do I need to set the REM values for mobile?

Just the explanation I was looking for! Thanks @Web Squadron! One quick question tho... I'm having an issue with the hero section of a website I'm currently building for a client. I work on a 24" screen and my laptop is 17", screen res in 1920*1080. My client has a small laptop, I believe 13" or 14". All my hero section is built with VW and VH and percentages, which works nicely for now, but when he visualizes the page in his laptop, the text displays massively, and some elements overlap with the nav menu. I asked what screen res he had, and said 1920*1080, just like mine, so I'm guessing this "shouldn't happen" since the screen resolutions are the same regardless of physical screen size? Is this correct? or am I missing something here?... This is exactly the reason I was researching for EMs and REMs right now... thanks in advance!

Очень важная и интересная информация, смотрю не смотря на то что её преподносят абсолютно мерзко (в этом видео)

Really well done! For sure answered more questions than confused me :) I may have missed it, but, Why are you leaning towards REM? And, why would you use REM over EM? It seemed the only difference is where you put the base line px size to scale off of (Elementor typography vs theme additional css - parent vs root) Yes, I know it is a difference, but I don't see why it is significant.... Thank you!!

one thing to point out, is that rem is really powerful in colab with @media queries cause you can nicely scale the fonts for different sizes with few lines of css

Thank you for this well-explained video of fonts!! Is there any concern of elementor wiping out the custom CSS when they do an upgrade to a newer version of their software?

I really liked that you want to point out the differences as non of the other videos talk about it deeply. BUT... sadly I still didn´t get it :(

Hello, what video should i watch. I have 2 columns and when I stretch they both lose there sizing and it looks horrible

Why are you leaning towards REM over EM?

hello Emran, the text is larger when opening the website in Facebook internal browser. and looks good on normal browsers. how to solve this please?

The code is not in description

If changing the root (html) font size from 16 px to something smaller, best to use a percentage value rather than a fixed pixel size as this impacts accessibility should someone want to increase their browser font size in the appearance settings. 10 px is 62.5% of 16 px, so the code should be html { font-size: 62.5%; }

epic

Great thank you!