CSS Units: vh, vw, vmin, vmax  

Note to self: the difference between vw (or vh) and percentages is that vw and vh are relative to the viewport whereas percentages are relative to the parent element.

Thanks for great explaing :3 6:14 vmin 6:58 auto adjust padding based on vh 7:37 setting font size with vw 9:40 problem with setting font with vw and vh 10:54 using vmin to set fontsize (very useful)

A neat trick is to set the font size on the parent element to 1vw and then use em on the child elements to get everything responsive at different widths.

I use: font-size: calc(Xvw + Yem); X and Y = two numbers. Example: calc(0.5vw + 1em); The cool thing is, you can easily control 'how responsive' the text will be. Sorry if you already have a video with this method. I haven't watched all your videos (you rock BTW), and I haven't seen this technique anywhere else. Thanks for the excellent content. I've learned so much.

I heard you read all comments, even those in videos that are 2 years old, so I just wanna say hi and thanks for the well explained videos!

I have started using vw for my body font-size because I use rem and em's and I use vw vh for divs but this is a whole new level and so exciting. Thanks for bringing these tips that make everything make that much more sense. You definitely help make the corners of the web that much better. ;) See you in the next one!

I just wanted to comment something as it helps grow the channel. Your tutorials are so awesome that there is hardly anything I can write here that doesn't make me feel silly :) Wish you lots of luck!

Kevin, as I work through CSS and apply these things to a site I'm building (my portfolio site, etc...) I've found very quickly mastering what units to use for what elements is well, damn important. Thank you for the lesson(s).

Thanks alot, although the vmax and vmin is making me go crazy, but i love the entire concept

Hey Kevin. Thanks for all the good stuffs. Love form India.

CRL - Conquering Responsive Design - Day #4 - Extra Credit! 🖥

These videos are really changing the way I handle CSS design. My techniques was always based off from elementary courses all explaining the basics, however these are real world experience coupled with a great way of teaching! Thanks, Kevin, these videos are really helping me (and many, I'm sure) to become better developers :D

I was looking for the video "vh vs em css", RU-vid gave me this one. Thanks Kevin, I have better understanding of them.

This is a video to remember, having seen, when I might someday come across this concern. I am so new to CSS and realizing how powerful it is. Organizing all my notes, so that I can quickly find previous points of interest is my most pressing issue. Robert Pirsig's book: comes to mind and all the notes that the narrator kept.

Thank you for your vids, but, i have a question about the beginning of the video. I noticed you said (height: 100vh) may cause issues with smaller phone sizes since contents could overflow outside the box, and you suggested a media query as a solution. Could it be a possible solution to use the (min-height: 100vh) instead of a media query so that the box will be responsive if the contents start to overflow or would that make the height too small, and only go to 100vh once the screen is smaller? Thanks again for the vids, currently doing your "Conquering Responsive Layouts"

I think these can be more troublesome than helpful! you open yourself to a lot of unwanted results, i think em and rems and percentages should be solid

Thank you so much! You make this tutorials really fun and I actually enjoy learning about all this! My layouts will look better than ever thanks to you!

Just commenting to say hi :) And thanks for the tutorial. I feel I'm finally on the right track to becoming a front-end dev with these videos!

I can't believe I missed this video when you published it! The aggravation this would have saved me, Kevin. I have a patch of grey hair due to this issue. Thanks again!

I think it could be possible to set the min and max font sizes with clamp() instead of a media query.

Yet another super clear explanation Kevin. Superb.. Thank you again. STILL enjoying your 21 day course. Try it folks it's ace.

easy, simple and elegant explanations....you are probably the best instructor for css i have ever come across...Kevin...stay blessed

Great video! I was using vh for my header most of the times but never tought about using vw for responsive Titles. You are the reason I dont hate CSS as much as I used to.

Awesome content Kevin. Thanks for your hard work and for all the effort you put into this.

great video Thanks for sharing

I've a good portion of today and yesterdya watching yoru videos. I've learned so much. It's like my skillset adn efficiency exponentially improved overnight. THANKS!

it really helped me, tnx a lot man! I like ur explanation method (from Afghanistan)

Please make a video on box-sizing: border box concepts and how we use it in real life....Thank you so much

When you're working with vh/vw/vmin/vmax in typography and you need to set a minimum font size (so it doesn't get too small), you can always add a static value to it with calc and make sure it never goes under that value, e.g.: font-size: calc(1em + 2.5vh) This should allow it to proportionally resize to the viewport height, but make sure that it is always at least 1em in situations where the viewport height becomes too small. My proposal doesn't take in account screen sizes that get too BIG though, so perhaps that would require a media query of its own. But hey, I guess that counts for mobile-first design.

Really useful tutorial, cleared up a lot for me! Thank you.

Thank you, Kevin. You have a rare talent for explaining what could be very complicated into something more easily digestible.

I think media queries are the best choice for typography, but you can also use calc(...vw + ...rem)

Thanks Kevin another great video, I am working through them. Excellent CSS and HTML content, cheers

If you set a fontsize of 1vmin or 1vw on your wrapper, then using ems for padding, margins or even font size on everything within could be useful? Idk ill have to see. That was my first thought anyway

Just watched as part of the "Conquering Responsive Layouts" course, and just wondering if an update with the dvw and dvh would be worthy, or just note that it takes into consideration of elements on the screen of mainly mobile devices?

i'm thinking about the image responsiveness.bcos adjusting the units affects the image.did kevin say about this?

I like to use it for any font on combination with calc() this way I can prevent it from getting too small but still have it responsive to screen size.

I really enjoyed this video, I am learning a lot from your course. thank you for making it free. I just am a young front end developer hoping to break into the industry. This is good content.

very well explained👏 use vmin for p use vw in titles for dynamically adjusting titles

Not a great explanation! Better to practise off camera before making such videos where you are confused yourself and you do ahhh ummmm ehhhh etc

this is brilliant. you not only show us what code does but tell us how can we use simple code like this in a a different situations which is super useful !

The thing is, when the screen get small, such as in a mobile screen, one sees it way closer then it would on a monitor, so it could actually be a good size, dependent of the medium being watched, that is...

Why did you use EM for the hero text instead of REM? Look at the code you will what I am talking about.

Super useful... especially as I'm working on understanding modern design using CSS

In newer videos you mentioned you almost never use viewport units. So you changed your mind with the years?

An updated video on the handling of these viewport units would be wonderful. Thanks ;)

Thanks for sharing that Kevin😊. I follow ur channel n it’s really useful

Thank you Kevin. It was good from both practical and theory.

very useful

Who's here in 2021? ...lol Awesome video as always, Kevin!

Thank you so much for the advice Kevin , i will use this in my next project

This is such a short lesson but actually so useful!! thank you!

8'30" - nowadays clamp() does this job

Do this video again plz because its volume is not good and it's gonno long years

in one of your videos, you recommended we use rem for font sizes so i got confused when i saw you using em

Thank you so much for this video, God Bless you man.

That's exactley what i needed! Thank you very much

which platfirm you are using can u tell please.......

thank you for this very to understand explanation!

as always: great tutorial :D

CSS, I hate you CSS lol great video though, thank you!

Thanks for yet another very useful video!!!!

Hey Kevin I had crank up the volume to hear you. :)

Thanks a lot for this! Finally got vmin and vmax.

Thanks Kevin your videos contain very good tips

Thanks Kevin. I was wondering why did you import your fonts in CSS rather than linking them in HTML?

lol why using it if it can be unpredictable?

Thanks for all your work!

Hi, thank you very much for the video, it was very useful! If you like, you could make a video with real examples about when to use em/rem instead of vmin/vh/... or instead of % (a sort of "rule of thumb" video for all the css units). That would be even more awesome! :-)

Your video is still helpful. Thanks.

Thank you, very useful information

It would be nice, if css would allow to use "min-" and "max-" for all css-properties, which are made for sizing. For example: font-size: 8vw; max-font-size: 50px; min-font-size: 12px; - this would solve the problem for media-queries on minute 9:54. It would be possible to define a "min-padding" in combination with "em", and so on.

Thank you very much for these videos.

Amazing tips but the volume its so low :c

Character In the video It's great, I like it a lot $$

I would say this.... Code maintainability, readability and predictability are important. Which means your use cases are good for example but not terribly practical.

1:06 ...and then... retribution had come 5:30 )) funny)) Anyway)) Thaks Kelvin for the clear explanation, the best what I found so far!)

vmin for headers looks pretty neat!

Thank you that was very helpful.

I'm relatively new to css (1.5years in), I noticed that you mentioned media queries for smaller sizes. I've been using calcs i.e calc(.5rem + 1.5vmin) or something like that, is there a potential issue I could run into doing it that way? I've done testing, but I can never be completely sure of everything.

Hey Nice Video, you really explained the css viewport concepts. Thanks Kevin.

Nice explanation per usual. Feeling calmer about front end stuff and warming up to CSS. You may have saved my work from home job with your content. You are making a big difference, Kevin. Thank you!

Thank you for your videos and the super cool Responsive Layouts Challange I'm conquering right now. I've started understanding and doing things rather than just being curious about web development.

Hey Kevin. Just wanted to say thanks for giving me a half a dozen "monkey-touch-rock" realization moments in the last few days with regards to responsive design. It's helped immensely.

Just wondering, words are kept together or sets of characters separated by whitespace in the html when resizing the viewport? And is there a way to lock/group block level elements, say in an inline-block display, to do the same?

You can use v-units to size text?? My mind is actually being blown right now. It seems so obvious in retrospect. 😅 This responsive design stuff is so cool.

I've subscribed to the course which is brilliant and in small enough bites to be digestible. There is so much to play with regarding this particular lesson: vh vw vmin vmax. Thank you Kevin.

This one was hyper useful. Just getting into Javascript, but wanted to get a better foundation in HTML&CSS, especially using better mediaQ, which eventually led me here so I can figure out calc(). This was super helpful, and will hopefully help improve my design game quite a bit.

Thank you for the explanation, however, vmax and vmin were a bit unclear to me. I guess, it has to do with padding issue that you faced while explaining the matter.

I liked the introduction into the units used for titles. Bringing in min(), max() and clamp() would be a useful addition to it I think.

thanks for giving us this content..

I know i'm three year late. But better late than never. Can you make a video on "div height and width 100%"?

Thanks for the explanation! Some relative units like these ones can be a little bit confusing for beginners like me.

I honestly thought I'd never have a use for vmin vmax, what a fun surprise! Thanks!

Iliterally made a js script for responsive images and yt throw me this. At least i learned something.

Thanks,that was helpful

Nice one 👍 more volume would help🙏

Hi Kevin, very competent and understandable! Thanks!

very low audio! !! please fix this

I always try to find ways to avoid Bootstrap and really to keep it as simple as possible, these videos help a lot *thnx*