This is concise, and packed with useful information. In one video i've understood everything i needed to, I mean even chatgpt didn't explain it this well😂. Nice👌
I'm doing my best to beat AI! 😂 I'm glad you found the video useful, thank you very much for your kind comment and for your support, I appreciate it. 🙌
This is a brilliant vid. Full of useful information and very well presented. You deserve more views. Great content like this should have 1m views. Sometimes there’s just no justice.
Thank you very much! I'm just happy the video exceeded your expectations. And even though growth takes a lot of time and patience, reading comments like yours makes it all that much easier and more fun. I really appreciate your support! 🙌💪
I've seen dozens of videos about wordpress and elementor in general. This one is BY FAR the most helpful, clear and concise out of them all. Congratulations buddy, this video will be a mantra for years to come. Thanks a lot !
Wow, that's awesome to hear. Your comment made my day. I'm really grateful that you took the time to reach out with something so positive and encouraging. Thank you very much! 🙏🙌
Thank you for sharing! This is the best video explaining CSS units I’ve found on UA-cam! Any chance you could make a similar one using WordPress Divi with some examples?
Great video! I would like to contribute important information. What is defined as 1px will not always correspond to a physical pixel on the screen. On smaller devices with high density, this relationship can change according to the initial-scale, the pixel density of the screen and even the zoom level applied by the user.
The container inside the container is containing other containers but its fine because you want this. You want the containers containing containers to contain other containers. This is why sometimes web dev hurts my brain. There's so much lingo connected to concepts you have to move through quickly! --- thanks for the video !
you are the only guy i would buy a elementor pro course from because of stuff like this. all the other guys just make like a simple site but there is much more to web development
That is amazing to hear, thank you. Hopefully, I'll find the time to create a comprehensive course in the near future. And I agree, there are so many things that make web development much easier once you understand them properly, but the information can be difficult to find. Thanks again, I really appreciate your support! 🙏
That's what I was hoping for, so thank you for letting me know I succeeded in explaining things well. And thank you for your support, I appreciate it very much! 💪
Hi, thanks for this video. Very well explained the key elements. Kept it simple and worked around actual utility. No noise and non-sense. Wish you gain more subscribers bro. 🙏
Thank you for your video. This is very hepful in setting up the design from the beginning. You mention using % for padding and you gave percents for Desktop, Tablet and Mobile. What calcultion are you using here? I would like to apply % to padding for laptop, Tablet Landscape and Mobile Landscape. Thank you
Thank you, Julio, I'm very happy to hear that the video was helpful! When it comes to the amount of padding, the numbers you mentioned are mostly just my personal preference. I just found that they work well across a wide range of different resolutions. If you're looking for something different, I recommend you experiment a bit and find something that suits you. There's no specific rule or calculation that you need to follow. The horizontal padding on tablet and mobile, so the padding that separates the content from the edges of the screen, is likely not going to vary a lot, because anything significantly lower or higher than 5% is quickly too much or too little. When it comes to the vertical padding however, you have total freedom to use any value you want to use. That way, you can make sure the padding fits the design for every individual project you're working on.
That's a ruler browser extension. If you just search for a 'ruler browser extension', you'll easily find one for whichever browser you're using. It's a really handy tool when designing or building websites! 👌
gread vidoe! I'm little confused about line-height. isn't em supposed to set by parent's font-size?. if line-height attribute is attached to "text", shouldn't it has to compare size with parent element's font-size not the text's font-size?
Thank you! As far as I've tested, setting the line-height to em is always directly equal to a multiplier or using no unit at all (which, again, acts like a multiplier). I've not yet come across a situation where I've had issues when using em for the line-height in Elementor. I just tested it out by creating a container, giving it a class and giving that class a font-size. What happens is, the text with the line-height set to em has the line-height still adapt to the original font size set directly in Elementor. The text gets bigger and the line-height gets too small, because it's connected to the original font size set in the widget. The text where I added in no unit had the line-height scale up properly. And for headings it didn't matter what I did in the CSS, the line-height stayed the same, whether it was in em or without a unit. So, it's safe to say it would be better to use no unit, BUT - it's highly unlikely you'll be giving your containers a font-size property via CSS. And if you don't do it via CSS, you can't do it. Basically, there are no settings ''fighting'' you when you use em for fonts. It's entirely connected to the font itself, unless you specifically target that container by giving it a class and giving that class a font-size. If in doubt, however, not using a unit at all is reliable because it's a direct multiplier of the font. For line-heights it works the exact same as em in Elementor, but if you're worried about parent elements, it's a great choice as well. Thank you for your support! 🙌
I'm sorry you found it confusing! Yes, pixels are good for padding. If you use them, the padding is just going to be the same size on every screen. Which is why I also pretty much exclusively use %. It's more responsive. The thing is, it's not black and white. Pretty much any unit can be used anywhere and it's up to you what you prefer. Hopefully, the video gave you some idea on what's best to use where and why. 🤞
It's a ruler browser extension. Just search for ''ruler browser extension'' and you'll find one for whichever browser you're using. They're very useful and easy to find. 💪
Hey there, thanks for the video. Why are you using pixels for the width but vh for the height? You say you get more consistent results. But I cannot fathom how. Setting a fixed pixel width results, at least in my way of thought, to different results on different screens. Could you elaborate? Thanks :)
Hi! Great question. Let's say you have a screen width of 2000 pixels and I have a screen width of 1500 pixels. Our browsers are both full screen. If the width is set to 1200 pixels, we're both going to see it as 1200 pixels. So will everyone else, except for people with screens smaller than 1200 (if we ignore the padding). If the width is set to 90vw, you're going to see a width equivalent to 1800 pixels and I'm going to see a width equivalent to 1350 pixels. And every other screen width will see a different size as well. Which can be great for responsiveness - but it is much less consistent. For vh, it's another story. Setting something to, let's say, 50vh, it's going to look huge on something like a 4K screen. Because it's going to take up at least 50% of the total height of the viewport. Which might be exactly what you want, but it might lead to a lot of empty space on the top and bottom of your container. If you have a lot of content, or, rather, tall content, there won't be as much space as if you have just a little bit of content. But the height of the container is going to be the same - at least 50vh. In this case, using % for padding (or even pixels) makes more sense, because the amount of space on the top or bottom can be consistent across different areas of your website. The padding itself won't depend on the amount of content. 100 pixels is going to be 100 pixels no matter the viewport height, and % is going to adjust accordingly based on the viewport width (not height). With vh, the amount of empty space just might depend on the content - if the content isn't tall enough to fill out the minimum height. But sometimes you might want to have a container cover up the full height of the screen. Or at least a certain amount of the screen, let's say 50%. In those cases, setting it to 100vh or 50vh respectively will ensure that. I hope I answered your question. 🙌
I have a question , I’m trying to build a webpage that can’t go over or under a fixed px size and all the ones in between there can resize , it’s for a pc app not mobile or tablet
Ah, that is a great question! Now that you mention it, I wish I mentioned it in the video. Anything that uses % is calculated based on the width of the parent element. This allows you to achieve equal spacing on all 4 sides, even if the child element isn't perfectly square. Let's say you have some text, which is most often wider than it is tall, and you want to give its container an equally sized % padding on the left, right top and bottom. If it calculated the height, you'd get different padding on the top and bottom and on the left and right. It would be incredibly difficult to get the sizes right and it would be impractical to work with. The actual height of the parent element is irrelevant. It's all about the width of the parent element. So, as the screen gets smaller horizontally, percent based padding, on all sides, also gets smaller - but if you make the screen smaller vertically, the padding remains the same. Still, it's a great option for responsiveness, because as screen sizes get smaller, they usually get smaller both vertically and horizontally. I hope that I answered your question! 💪
I have some questions: Should I set the border radius in pixels or em? In pixels, with the same size the corners will look smaller on a large button and rounder on a small button, correct? Should I then use em for the corner roundness? But 1 em is too much, and it seems to only accept discrete numbers and not like 0.75... I want the button to look exactly the same no matter how big or small I make it
Great question. I usually use pixels for the border radius. But you're right, when using pixels, the border radius looks larger on small buttons and smaller on large buttons. However, em will scale up or down with the font size, so using it for the border radius will allow your buttons to look exactly the same, regardless of their size. And you can use decimal numbers, but there's a trick to it. Once you type in '0.5', it will default to '05'. That's a bug. You can fix it by just going back in between the '0' and the '5' and placing in a dot. Once you do that, you should have a decimal border radius value. You can also just copy and paste it in. And I just found out that it works normally if you use a comma instead of a dot. So you have 3 different options to make it work. Let me know how it goes! 💪
Good question! It's a browser ruler extension. In my case, I'm using Mozilla Firefox and this extension: addons.mozilla.org/en-US/firefox/addon/browser-ruler/ It's really useful for measuring things and checking if everything is properly aligned.
I use rem, too, with Elementor. However I noticed that if I increase the font size in Chrome under the settings (for people with bad eyes for example) I notice the font doesn't get bigger as it does on px font websites. Still haven't figured that out. So basically the opposite of what it should do for accessibility.
Hey, Alexandra! That's very interesting. I just tried changing the font size in Chrome (under 'Appearance' - 'Font size') and it worked as expected on my website. And by as expected I mean everything was incredibly huge and not very pleasing to the eye. Maybe going for the 'very large' font option wasn't the best idea. 😅 But it did work. Perhaps there are other Chrome settings overriding it? I find it odd that rem doesn't get bigger but pixels do.
Hi! I'm not quite sure what you mean - this is a video for Elementor, a WordPress plugin. 😁 You can find out more about it here: be.elementor.com/visit/?bta=27702&nci=5349
Hi! It's definitely not the most responsive option available. It's still, in my opinion, significantly better than pixels, however. Especially because of accessibility. Using the clamp function would be more responsive but also a whole lot of extra work. Which I feel is often unnecessary and impractical, because you can get great results by just adjusting the font sizes for different devices, especially if you combine it with some CSS media queries if needed. Which solution do you prefer to use? 🙌
0:29 - px
1:30 - %
4:09 - vh and vw
5:49 - rem and em
11:02 - Summary
One of the few teachers I can actually understand so well especialyl with the visual representations. Such a god send!
This is so perfectly explained in a practical way. Thanks a lot! :)
Exactly what I need now for responsive webs,
Now I understand how they work together. Thanks so much bro.
Keep it up, nice tutorial.
Amazing video! Really helped simplify these things for me, thank you so much!!
This is concise, and packed with useful information. In one video i've understood everything i needed to, I mean even chatgpt didn't explain it this well😂. Nice👌
I'm doing my best to beat AI! 😂 I'm glad you found the video useful, thank you very much for your kind comment and for your support, I appreciate it. 🙌
@cdney8285 I totally agree !!!! Very helpful !!
This is a brilliant vid. Full of useful information and very well presented. You deserve more views. Great content like this should have 1m views. Sometimes there’s just no justice.
Thank you very much! I'm just happy the video exceeded your expectations. And even though growth takes a lot of time and patience, reading comments like yours makes it all that much easier and more fun. I really appreciate your support! 🙌💪
I've seen dozens of videos about wordpress and elementor in general.
This one is BY FAR the most helpful, clear and concise out of them all.
Congratulations buddy, this video will be a mantra for years to come.
Thanks a lot !
Wow, that's awesome to hear. Your comment made my day. I'm really grateful that you took the time to reach out with something so positive and encouraging. Thank you very much! 🙏🙌
Thank you for sharing! This is the best video explaining CSS units I’ve found on UA-cam! Any chance you could make a similar one using WordPress Divi with some examples?
Great video! I would like to contribute important information. What is defined as 1px will not always correspond to a physical pixel on the screen. On smaller devices with high density, this relationship can change according to the initial-scale, the pixel density of the screen and even the zoom level applied by the user.
The container inside the container is containing other containers but its fine because you want this. You want the containers containing containers to contain other containers. This is why sometimes web dev hurts my brain. There's so much lingo connected to concepts you have to move through quickly! --- thanks for the video !
you are the only guy i would buy a elementor pro course from because of stuff like this. all the other guys just make like a simple site but there is much more to web development
That is amazing to hear, thank you. Hopefully, I'll find the time to create a comprehensive course in the near future. And I agree, there are so many things that make web development much easier once you understand them properly, but the information can be difficult to find. Thanks again, I really appreciate your support! 🙏
Thank you sooo much, this really helped me in understanding the differences ❤
tysm for this video it helped me with fcc
One of good video about the units use case and how efficiently can be used. thanks
Thank you for the kind words and for taking the time to watch the video! I appreciate it. 🙌
Great video! I’ve been trying to find something that explained all these and this has been the best explanation I’ve found so far. Thank you.
I'm very happy to hear that. Thank you for your kind words and for your support, I appreciate it! 🙌🙏
Very helpful and simple.. thank you ❤
Thanks!
Wow, that's incredibly kind of you. I really appreciate your support, thank you very much! 🙌🙏
amazing video. I wish I have seen this long time ago.
thank u brother
from malaysia
Best explain ever. Thanks!
I'm glad you think so. Thank you very much for your support! 🙌
Great Contetnt, To the point and precise. Thanks Buddy
I’m very happy to hear that you found the video helpful. Thank you for your support! 🙌
Great video. Thanks.
clear explanation and good practical examples. Thank you sooo much!!
Thank you for your kind comment and for your support, I really appreciate it! 🙏
Great job, it's super easy to understand with your help and lots of examples, thank you!
That's what I was hoping for, so thank you for letting me know I succeeded in explaining things well. And thank you for your support, I appreciate it very much! 💪
Hi, thanks for this video. Very well explained the key elements. Kept it simple and worked around actual utility. No noise and non-sense. Wish you gain more subscribers bro. 🙏
Thank you very much for your positive feedback! I'm glad you enjoyed the video and found it useful. I appreciate your support! 🙌🙏
Literal hero, thank you very much.
hey can u tell me what were u using to measure those pixels???
Thank you for your video. This is very hepful in setting up the design from the beginning. You mention using % for padding and you gave percents for Desktop, Tablet and Mobile. What calcultion are you using here? I would like to apply % to padding for laptop, Tablet Landscape and Mobile Landscape. Thank you
Thank you, Julio, I'm very happy to hear that the video was helpful! When it comes to the amount of padding, the numbers you mentioned are mostly just my personal preference. I just found that they work well across a wide range of different resolutions. If you're looking for something different, I recommend you experiment a bit and find something that suits you. There's no specific rule or calculation that you need to follow.
The horizontal padding on tablet and mobile, so the padding that separates the content from the edges of the screen, is likely not going to vary a lot, because anything significantly lower or higher than 5% is quickly too much or too little. When it comes to the vertical padding however, you have total freedom to use any value you want to use. That way, you can make sure the padding fits the design for every individual project you're working on.
@@Reialesa thank you!!! This explaination is very helpful.
I'm happy to help! Thank you for your support. 🙌
This was explained so well thank you!
I'm very glad you found it helpful!
Awesome explanation
Great explanation. Thanks for the guidelines!
I'm happy to help, thank you very much for watching the video and for your support. I really appreciate it! 🙏
What width do you use for a widescreen breakpoint? Breakpoint width size? And font size used in rem for widescreen??
useful and clear explaination.
I'm glad you think so! Thank you for taking the time to watch the video and thank you for the support, I appreciate it. 🙌
2:35 How can the measurement be carried out? What is the keyboard shortcut for it?
That's a ruler browser extension. If you just search for a 'ruler browser extension', you'll easily find one for whichever browser you're using. It's a really handy tool when designing or building websites! 👌
Thanks! This video was very useful.
Awesome, I'm glad you found it useful. Thank you for your support! 🙌
Reialesa, amazing content, as always. Thanks a lot.
I'm very happy you liked it - and even more so to read your amazing comment. Thank you very much! 🙌
gread vidoe!
I'm little confused about line-height.
isn't em supposed to set by parent's font-size?.
if line-height attribute is attached to "text", shouldn't it has to compare size with parent element's font-size not the text's font-size?
Thank you! As far as I've tested, setting the line-height to em is always directly equal to a multiplier or using no unit at all (which, again, acts like a multiplier). I've not yet come across a situation where I've had issues when using em for the line-height in Elementor.
I just tested it out by creating a container, giving it a class and giving that class a font-size. What happens is, the text with the line-height set to em has the line-height still adapt to the original font size set directly in Elementor. The text gets bigger and the line-height gets too small, because it's connected to the original font size set in the widget. The text where I added in no unit had the line-height scale up properly. And for headings it didn't matter what I did in the CSS, the line-height stayed the same, whether it was in em or without a unit.
So, it's safe to say it would be better to use no unit, BUT - it's highly unlikely you'll be giving your containers a font-size property via CSS. And if you don't do it via CSS, you can't do it. Basically, there are no settings ''fighting'' you when you use em for fonts. It's entirely connected to the font itself, unless you specifically target that container by giving it a class and giving that class a font-size.
If in doubt, however, not using a unit at all is reliable because it's a direct multiplier of the font. For line-heights it works the exact same as em in Elementor, but if you're worried about parent elements, it's a great choice as well.
Thank you for your support! 🙌
You show an image where you say Px are good for paddings and then you say oh...but I exclusively use %....that's confusing.
I'm sorry you found it confusing! Yes, pixels are good for padding. If you use them, the padding is just going to be the same size on every screen. Which is why I also pretty much exclusively use %. It's more responsive.
The thing is, it's not black and white. Pretty much any unit can be used anywhere and it's up to you what you prefer. Hopefully, the video gave you some idea on what's best to use where and why. 🤞
@@Reialesa thanks gor replying on a Sunday. Keep up the good work.
I'm happy to help! Thank you for your kind words, I appreciate it. 🙌
what PLUGIN or extendtion did you use to measure the dimension of website in this video?
It's a ruler browser extension. Just search for ''ruler browser extension'' and you'll find one for whichever browser you're using. They're very useful and easy to find. 💪
Hey there, thanks for the video. Why are you using pixels for the width but vh for the height? You say you get more consistent results. But I cannot fathom how. Setting a fixed pixel width results, at least in my way of thought, to different results on different screens. Could you elaborate? Thanks :)
Hi! Great question. Let's say you have a screen width of 2000 pixels and I have a screen width of 1500 pixels. Our browsers are both full screen. If the width is set to 1200 pixels, we're both going to see it as 1200 pixels. So will everyone else, except for people with screens smaller than 1200 (if we ignore the padding).
If the width is set to 90vw, you're going to see a width equivalent to 1800 pixels and I'm going to see a width equivalent to 1350 pixels. And every other screen width will see a different size as well. Which can be great for responsiveness - but it is much less consistent.
For vh, it's another story. Setting something to, let's say, 50vh, it's going to look huge on something like a 4K screen. Because it's going to take up at least 50% of the total height of the viewport. Which might be exactly what you want, but it might lead to a lot of empty space on the top and bottom of your container. If you have a lot of content, or, rather, tall content, there won't be as much space as if you have just a little bit of content. But the height of the container is going to be the same - at least 50vh.
In this case, using % for padding (or even pixels) makes more sense, because the amount of space on the top or bottom can be consistent across different areas of your website. The padding itself won't depend on the amount of content. 100 pixels is going to be 100 pixels no matter the viewport height, and % is going to adjust accordingly based on the viewport width (not height).
With vh, the amount of empty space just might depend on the content - if the content isn't tall enough to fill out the minimum height. But sometimes you might want to have a container cover up the full height of the screen. Or at least a certain amount of the screen, let's say 50%. In those cases, setting it to 100vh or 50vh respectively will ensure that.
I hope I answered your question. 🙌
I have a question , I’m trying to build a webpage that can’t go over or under a fixed px size and all the ones in between there can resize , it’s for a pc app not mobile or tablet
Very helpful, thank you 👍
That's great to hear, thank you for your support, I appreciate it! 🙏
Tim, I don't undestand what this % is based on (only for top and bottom padding). Could you explain with more detail?
Ah, that is a great question! Now that you mention it, I wish I mentioned it in the video.
Anything that uses % is calculated based on the width of the parent element. This allows you to achieve equal spacing on all 4 sides, even if the child element isn't perfectly square. Let's say you have some text, which is most often wider than it is tall, and you want to give its container an equally sized % padding on the left, right top and bottom. If it calculated the height, you'd get different padding on the top and bottom and on the left and right. It would be incredibly difficult to get the sizes right and it would be impractical to work with.
The actual height of the parent element is irrelevant.
It's all about the width of the parent element. So, as the screen gets smaller horizontally, percent based padding, on all sides, also gets smaller - but if you make the screen smaller vertically, the padding remains the same. Still, it's a great option for responsiveness, because as screen sizes get smaller, they usually get smaller both vertically and horizontally.
I hope that I answered your question! 💪
@@Reialesa Oh man, you certainly have the touch to teach. It's perfectly clear now. Please keep bringing us new content. Thank you so much.
Thank you very much, that means a lot to me. I really appreciate your support and I will do my best to keep providing good content! 🙌💪
I really like this video, thanks for it.
That's very kind of you, I'm happy you liked the video. Thank you for your support! 🙏
great video. thanks. I subscribed. love your charts too!
That's awesome to hear, I'm glad you liked the video. Thank you for your support and for your kind comment, I appreciate it a lot! 🙌
Thanks you so much. Great video. Very helpfull
I'm glad you found the video helpful. Thank you very much for your support, I appreciate it! 🙌
I have some questions: Should I set the border radius in pixels or em? In pixels, with the same size the corners will look smaller on a large button and rounder on a small button, correct? Should I then use em for the corner roundness? But 1 em is too much, and it seems to only accept discrete numbers and not like 0.75... I want the button to look exactly the same no matter how big or small I make it
Great question. I usually use pixels for the border radius. But you're right, when using pixels, the border radius looks larger on small buttons and smaller on large buttons. However, em will scale up or down with the font size, so using it for the border radius will allow your buttons to look exactly the same, regardless of their size.
And you can use decimal numbers, but there's a trick to it. Once you type in '0.5', it will default to '05'. That's a bug. You can fix it by just going back in between the '0' and the '5' and placing in a dot. Once you do that, you should have a decimal border radius value. You can also just copy and paste it in. And I just found out that it works normally if you use a comma instead of a dot. So you have 3 different options to make it work. Let me know how it goes! 💪
This is so hard! i give up! i
m going back to mc donalds, yes the customers scream at me, but at least i don't have to get confused!
what did you use for checking the padding with mouse click and drag at 2.32
Good question! It's a browser ruler extension. In my case, I'm using Mozilla Firefox and this extension: addons.mozilla.org/en-US/firefox/addon/browser-ruler/
It's really useful for measuring things and checking if everything is properly aligned.
I use rem, too, with Elementor. However I noticed that if I increase the font size in Chrome under the settings (for people with bad eyes for example) I notice the font doesn't get bigger as it does on px font websites. Still haven't figured that out.
So basically the opposite of what it should do for accessibility.
Hey, Alexandra! That's very interesting. I just tried changing the font size in Chrome (under 'Appearance' - 'Font size') and it worked as expected on my website. And by as expected I mean everything was incredibly huge and not very pleasing to the eye. Maybe going for the 'very large' font option wasn't the best idea. 😅 But it did work. Perhaps there are other Chrome settings overriding it? I find it odd that rem doesn't get bigger but pixels do.
@@Reialesa Now it works for me, too, no idea what was wrong. 😄
Thanks for the video. Very helpful. I subscribed!
That is awesome, thank you very much. I appreciate the support! 🙌
This was awesome!
I'm glad you think so! Thank you very much, I appreciate it. 🙌
Thank you
Thank you for your support! 🙌
Very helpful 🤩🤩
🥰🙌
Thank you❤
I'm happy to help, thank you very much for your support! 🙌
Nice Tim. New sub earned :)
Thank you very much for your support, I appreciate it! 🙌🙏
amazing content, thank you
I'm very glad you found it helpful. Thank you for your support and for an amazing comment! 🙌
which software or website is it
Hi! I'm not quite sure what you mean - this is a video for Elementor, a WordPress plugin. 😁 You can find out more about it here: be.elementor.com/visit/?bta=27702&nci=5349
It's a website builder called Elementor on a CMS called wordpress. Search wordpress on UA-cam you'll find out.
great content and usefull❤
I'm happy you found the video useful. Thank you for your great comment! 🙏
Great
Thank you, I appreciate it! 🙏
REM is not the way to create responsive font sizes imo
Hi! It's definitely not the most responsive option available. It's still, in my opinion, significantly better than pixels, however. Especially because of accessibility. Using the clamp function would be more responsive but also a whole lot of extra work. Which I feel is often unnecessary and impractical, because you can get great results by just adjusting the font sizes for different devices, especially if you combine it with some CSS media queries if needed.
Which solution do you prefer to use? 🙌
#Maths
Oh man ur so cute i got a crush on you LOL
Very helpful tutorial. Thanks!
I'm glad you found the video helpful. Thank you for your support, I appreciate it! 🙌😁