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 TH-cam 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.
@@websquadron You have been, are, and will be I'm sure. I can tell teaching is ingrained in you in a very special way. I really don't know anything about you personally, but I know God has given you a wonderful, unique gift of teaching. Have you ever considered pursuing teaching as a career? Please forgive me if I'm getting too personal. There is such a dearth of teachers of your caliber in the world today. Children desperately need teachers like you.
Totally :) Trying to work out Parent v Root HTML - let alone what they were confused me so much - so I ended up using Pixels for fonts for a long time. Now I feel okay with using REM :) Okay.... I'm just going to blast out 'Losing my Religion' now...
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.
Do you have any video tutorial explaining the basics and difference between PX, EM, REM, VH and other size options Elementor uses, best practices for use of each, when you should use each of them and which is best for responsiveness. You know the basic stuff.
@@worksmartomnimediatv5890 Not a detailed video, but I did this PX v EM video: th-cam.com/video/dKUHLAB0Fyw/w-d-xo.html My Recommendations are: Only use PX for margins, padding and images. Use REM instead of EM, just because it's better responsively. VH - I only use for Sections when I make them Full Screen. Never bothered or found a good reason to use it for fonts.
For almost 12 months, the use of EM and REM used to plague me, but once I made the 'Eureka' discovery fo exactly what the Parent and Root HTML was, I had to share :)))
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!
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?
No, the Code will be fine - but to be extra-extra safe - I add my codes to Code Snippets - which is Free - and created by Verdi Heinz (who works for Elementor).
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?
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
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!!
Apparently after speaking to many, REM reacts better for responsive sizing. It's all to do with the HTML being the CORE UNIT, thus if the HTML is 20px, then everything else will run off that. It does get complicated but you will find more people leaning to REM now :)
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
Great question. It does depend on the Spec and what you're going after. I leave the ROOT HTML as 16PX, thus no need to modify. H1 = 3 REM H2 = 2.5 REM H3 = 2 REM Text = 1 REM, but sometimes 1.2 REM
@@websquadron thanks a lot! for you quick response - I will watch the new version right away. Btw do you have also a video about "why its possible (yes I know this is a very basic question) to change the page title / tagline in the WP Settings, in the Theme Settings and then also on top in the Page Settings?" Its very confusing and what would be the right way to do this?
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%; }
@@websquadron I have used a number of online clamp calculators, but as you point out, this is great to be able to copy all settings at once to paste into one's CSS location. Very useful tool, many thanks Imran
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.
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 TH-cam 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.
My eyes welled on reading that. Your kind words and sincerity has blown me away. A huge thanks.
@@websquadron Absolutely my pleasure and honor. Please keep up what you're doing and take every opportunity to share your unique teaching gift, Imran.
@@mnburch I hope to be there for you too!
@@websquadron You have been, are, and will be I'm sure. I can tell teaching is ingrained in you in a very special way. I really don't know anything about you personally, but I know God has given you a wonderful, unique gift of teaching. Have you ever considered pursuing teaching as a career? Please forgive me if I'm getting too personal. There is such a dearth of teachers of your caliber in the world today. Children desperately need teachers like you.
@@mnburch I have many times considered teaching but have often stopped at the stages of applying or looking deeper into it.
Thank you for making these advanced Elementor/CSS tuts, we are an underserved niche!
Spent many weeks fudging around, well done
This is the first time these concepts have made a bit of sense to me. Thank you so much!
This might interest you:
th-cam.com/video/DGl5Zl586i4/w-d-xo.html
BEST video explaining EM and REM in Elementor - thanks for explaining where the Parent and Root are controlled from. Much appreciated!! Subb'd
How did I miss this?! There should be plenty of shiny happy people switching to REM after this video...
Totally :) Trying to work out Parent v Root HTML - let alone what they were confused me so much - so I ended up using Pixels for fonts for a long time. Now I feel okay with using REM :)
Okay.... I'm just going to blast out 'Losing my Religion' now...
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.
You give me what I looked for, greaaat
Brilliant! Simply Brilliant!
Many thanks!
Thanks for making this video Imran. The missing piece for me was finding what controls the EM vs REM sizing. Thanks a lot
Same here. People mention the Parent or Root HTML but never explained where. So glad that we got there :)
Do you have any video tutorial explaining the basics and difference between PX, EM, REM, VH and other size options Elementor uses, best practices for use of each, when you should use each of them and which is best for responsiveness. You know the basic stuff.
@@worksmartomnimediatv5890 Not a detailed video, but I did this PX v EM video: th-cam.com/video/dKUHLAB0Fyw/w-d-xo.html
My Recommendations are:
Only use PX for margins, padding and images.
Use REM instead of EM, just because it's better responsively.
VH - I only use for Sections when I make them Full Screen. Never bothered or found a good reason to use it for fonts.
@@websquadron Thank you so much!
(Girly Screams Happiness) Thank you so much . I have spent weeks correcting for desk top to phone.
Holy Crap... thanks Imran that makes so much sense finally!! Great video, really easy to follow :)
For almost 12 months, the use of EM and REM used to plague me, but once I made the 'Eureka' discovery fo exactly what the Parent and Root HTML was, I had to share :)))
Dude, I am loving this content!
Glad you enjoy it! Great to have you :)
Thank you finally I understand it with easy way
Yessssssss :))))))))
Great video! Do I need to set the REM values for mobile?
I would and you may want to see this: th-cam.com/video/kKG5dabkEuc/w-d-xo.html
And: th-cam.com/video/oWONLR_arA0/w-d-xo.html
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!
You're right, it shouldn't though this where I would advise on using Clamp Typography.
th-cam.com/video/pV4UJ_rL-jo/w-d-xo.htmlfeature=shared
This is really helpful
This is amazing! Thanks! Amazing content!
This updated version is much more helpful.
th-cam.com/video/oWONLR_arA0/w-d-xo.html
Great explanation, thank you! 👍👍👍
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?
No, the Code will be fine - but to be extra-extra safe - I add my codes to Code Snippets - which is Free - and created by Verdi Heinz (who works for Elementor).
@@websquadron Thank you! I appreciate the tip on using code snippets!
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?
Yes from the browser but most are set as 16px so it’s quite consistent
Why are you leaning towards REM over EM?
Force of habit with no scientific explanation.
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
I’ve now moved onto using them with clamp. Make sure you see the clamp video I put out a few weeks ago :)
@@websquadron ohh snap, ok, will take a look, thanks
you're the best brother
See this updated video: th-cam.com/video/kKG5dabkEuc/w-d-xo.html
Thx, nice video dude. Now I now the difference, and how it works together.
Ace :)
REM is my preferred, simply because I can get more tweakability from my CSS code. Also, REM had that great song, Shiny Happy People! 😉
Love the Band REM. Losing my Religion always hits me deep. Totally agree on REM for Fonts.
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!!
Apparently after speaking to many, REM reacts better for responsive sizing. It's all to do with the HTML being the CORE UNIT, thus if the HTML is 20px, then everything else will run off that. It does get complicated but you will find more people leaning to REM now :)
@@websquadron So I guess using px to get everything pixel oerfect is all a fallacy? Asking for a friend...🤓🤔
@@worksmartomnimediatv5890 Yes. Just use PX for margin/padding and image sizing.
REM for fonts is a winner :)
woo I was looking for this. Now I have to redo few website I guess ^^
Only if the time is worth it :)
Great explanation, thank you! Too bad I didn't find this video 10 videos ago.
Hello, what video should i watch. I have 2 columns and when I stretch they both lose there sizing and it looks horrible
You could set their Custom Width in the Advanced Tab
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
Great question.
It does depend on the Spec and what you're going after.
I leave the ROOT HTML as 16PX, thus no need to modify.
H1 = 3 REM
H2 = 2.5 REM
H3 = 2 REM
Text = 1 REM, but sometimes 1.2 REM
The code is not in description
For the Root HMTL?
.root {
font-size: 16px;
}
Очень важная и интересная информация, смотрю не смотря на то что её преподносят абсолютно мерзко (в этом видео)
Can you add that in English?
@@websquadron Yes i can )
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?
Not sure about why that happens
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 :(
Watch this updated version :)
th-cam.com/video/kKG5dabkEuc/w-d-xo.html
@@websquadron thanks a lot! for you quick response - I will watch the new version right away. Btw do you have also a video about "why its possible (yes I know this is a very basic question) to change the page title / tagline in the WP Settings, in the Theme Settings and then also on top in the Page Settings?" Its very confusing and what would be the right way to do this?
perfect thank you
You're welcome!
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%;
}
I would go deeper and suggest using Font Clamp(). See this: th-cam.com/video/DGl5Zl586i4/w-d-xo.html
@@websquadron I have used a number of online clamp calculators, but as you point out, this is great to be able to copy all settings at once to paste into one's CSS location. Very useful tool, many thanks Imran
epic
Great thank you!