CSS Units: vh, vw, vmin, vmax

[@rawnoob2143]

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.

[@samuelwong6352]

best comment ever

[@adreenazea9015]

@@samuelwong6352xh Cad Cb Vcr c km Gj X C nda ca c8 cm C V8c v pi bad H h Cah j bdi cb Fi bc8bcn Be gb ci vf cm c V

[@adreenazea9015]

Cg n IBM V 🐼c set gbf c ✨💎💎✨💎💎✨ 💎💎💎💎💎💎💎 💎💎💎💎💎💎💎 ✨💎💎💎💎💎✨ ✨✨💎💎💎✨✨ ✨✨✨💎✨✨✨ 8-) Vb G

[@adreenazea9015]

@@samuelwong6352 vbhb

[@adreenazea9015]

Bismillah vgg itu vv. Cgvj

[@torstenschitkowski23]

Thanks for all your work!

[@KevinPowell]

Thanks so much!

[@nuttaphonr.6498]

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)

[@TheJacklwilliams]

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

[@cgungm]

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

[@The-Heart-Of-It]

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.

[@antives8584]

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

[@ayo.eleven]

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!

[@sueholder703]

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!

[@truefisherking]

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.

[@LucianoFalettiplus]

Have you ever used calc (Xvw + Yvh) ?

[@truefisherking]

@@LucianoFalettiplus I've played with it, but I wanted a method that mimicked (mx + b). I wanted a constant, but it makes sense to use Yvh. In theory, a constant is better, but in practical use, if a user is trying to view your page in a manner that makes the text too small to read, then they probably can't see anything anyways.

[@albirtarsha5370]

This is better as it resembles y=mx+b

[@markcook8516]

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.

[@yasirtahirkheli74]

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

[@KevinPowell]

Thanks ks so much for the kind words, so glad that your enjoying my videos 😁

[@ruuguuin]

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 !

[@VideoMo2000]

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.

[@mohamedelidrissi2839]

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!

[@reshairo]

now 3 year 😉

[@keshav2136]

Hi

[@pedhead]

@Kase Jaziel wut if you don't have a GF? #foreveralone 😭

[@mukeshrap6sm27ezdaguraopp6]

Ttþoo88t

[@subfreeman9778]

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

[@saguoran]

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

[@adolfojbarreto5021]

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!

[@devincox7985]

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.

[@milleniummoses]

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!

[@KevinPowell]

That's great to hear David, I'm glad my videos are helping you out! Always humbling to know some people are binge watching my stuff!

[@matthewcain8118]

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

[@pottingshedgene]

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

[@leticiaespino7251]

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

[@SamCrowetheCreativeCrowe]

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!

[@nswayze2218]

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

[@PaulNieman]

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.

[@ayanghazi7632]

well that was one hell of a concept man, thanks for explaining it in such a nice manner.

[@almonddaves]

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!

[@surajitdas94]

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

[@elninoxz97]

This tutorial made it crystal clear what these responsive units do, thanks man!

[@newmanadesan9964]

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.

[@jcespinoza]

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!

[@TazExprez]

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

[@Aeriallistique]

got a 7 hour layover in Madrid soon...your videos will keep me highly entertained!! thank you.

[@KevinPowell]

Oh man, that's a killer layover! Glad that I'll help you occupy some of that time :)

[@paulinadoki1043]

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.

[@regbarnard2866]

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

[@JonHyatt_UT]

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

[@matchflixCH]

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.

[@junaid7083]

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

[@jason0ng]

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

[@ינוןאלבז-כ1ז]

I learn a lot from every video of yours, I've just discovered your channel and you treasure

[@jamiroquaiordie]

the best teacher out there

[@mauriciovargasrincon3368]

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

[@anandcherian.585]

very useful

[@KelseyThornton]

vmin for headers looks pretty neat!

[@thelanguagecube9009]

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

[@utkarshkukreti239]

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

[@heliodias2865]

As always fantastic video, very clarifying.

[@davidoluremi1981]

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

[@VinayKumar-konvict]

this video cleared out my doubts on vmin and vmax

[@justnevergiveup6761]

Thanks Kevin, I'm learning a lot from you.

[@oluwaseunogundipe1531]

great video Thanks for sharing

[@diegoperegrino8152]

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

[@patd5280]

Excellent as always...

[@wais4148]

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

[@sueknox1104]

Great information Kevin!

[@benzflynn]

Good tips here on title sizing with vw and vmin.

[@victordima5259]

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

[@danielchibuogwu9832]

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

[@TheCocoaDaddy]

Thanks for yet another very useful video!!!!

[@kluchtube7042]

God bless you man!

[@jefferymuter4659]

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.

[@dot1160]

Thanks Kevin your videos contain very good tips

[@kartikxramesh]

God the demo web page is so satisfying!

[@fedoraexpert]

Simply!! great stuff, Kevin. I'll watch all your videos. your explanation of things is un-matchable.

[@KevinPowell]

Thanks so much!

[@vahan-sahakyan]

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

[@Crossnake]

Thank you very much for these videos.

[@thomasmeiller4455]

Very good tutorials by you. Everytime I learn just a quite a little bit more. Thks.

[@mohamedramibenaouf3401]

thank you for this very to understand explanation!

[@philipdufour7233]

That's so sweet on font!

[@rawnoob2143]

The CSS code height:20vmax states that the height of the selector is 20% of the larger of viewport width and viewport height

[@rawnoob2143]

This is a note to myself

[@KevinPowell]

It doesn't do that! It takes the viewport maximum, so it'll match either the height or width, depending on which is bigger.

[@СерёгаСТАЛКЕР-х7в]

Hi Kevin, very competent and understandable! Thanks!

[@christinemoore1509]

Your video is still helpful. Thanks.

[@etorty_dev]

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

[@darshanpandya10811]

Thank You Kevin..

[@calvitocalvon1711]

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

[@ekejma]

Enjoy your videos thanks Kevin!

[@nikolaikulikov8858]

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

[@ifzo123]

Great video. Keep on posting, please!

[@ozodbekjuraev9268]

Thank you, very useful information

[@gatoespagueti]

Awesome channel man! Keep it up with the great material , you have a new student. Greetings from Venezuela

[@KevinPowell]

Thanks so much David!

[@maulikpatel7501]

thanks for giving us this content..

[@naziyatarannum7196]

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

[@christianofernandes7682]

Great tutorial! Thank you

[@jorgeatempa]

I like your content, excellent work

[@HAMNAD]

You are a legend 🎉❤

[@aaravpant1082]

Thank you so much, sir.

[@fire23hummer]

That's useful, thanks!

[@sashaikevich]

You may want to check out fluid typography. CSS tricks has an article on it. It's essentially using vw units, but in a calc(), letting you set max and min font sizes to avoid media queries.

[@KevinPowell]

I've used that a lot :). We have to be careful with setting fonts with viewport units though, for accessibility reasons (users can't scale the text). For titles it's fine (I would think anyway, since they're big), but I wouldn't use it for body text.

[@technicallygeckley14]

Another great video. One thing that would help me personally is when you're talking about how things like vmin/max, and how those measurements are calculated, is a quick diagram. Thanks!

[@KevinPowell]

Thanks for the feedback. I wanted to do something like that, but I'm not technically savvy enough when it comes to video editing to figure it out :\.

[@technicallygeckley14]

No sweat my friend. Again, love your content!

[@maninarush2112]

Thanks Kevin, really helped me out.

[@conansredbowtie]

Thank you that was very helpful.

[@natnaelsisay1424]

crystal clear

[@oxi7576]

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.

[@itsPenguinBoy]

that's where clamp() comes in

[@ehsansotoodeh6522]

Very helpful video. Thank you.

[@najlepszyinformatyk1661]

Thanks Kevin :)

[@Monsterz6917]

Thank You So Much Bud

[@draganbogdanovic2173]

Wow man. That's awesome.

[@KevinPowell]

Yeah, I was pretty excited about these when I learned about them. They can be really useful, and fun to play around with.

[@pika7037]

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

[@KevinPowell]

Another good suggestion, thanks.

[@DAVIDGUALDRON]

Great explanation. Thank you