I saw this thing like 1 day before I saw it on your channel but, man, Kevin, you really make me love CSS more and more. Even thought I'm on my path on self-taught web development and I'm just learning CSS, they way you explain it every single time amazes me. I'll be forever in your debts. Keep up the not good but the amazing work you do!
I made my first website in 1996 for a Quake clan I made with some friends in junior high. Back then, text was manipulated with the now defunct font tag, and anything layout related was mostly done with images and the background attribute. I was first introduced to CSS in the early 2000s when customizing my MySpace page. I didn't know it was CSS at the time. I started learning CSS in earnest in 2009, when Flash (I was a Flash developer) started to go belly-up. I consider myself a pretty advanced CSS user, but I don't really have time to keep up with all the changes since I went back to University and had 2 kids. This channel has been a really awesome way to just get little snippets of the most useful stuff to keep me in the loop. Thanks Kevin!
Kevin’s ability to teach concepts like CSS(coding) to an audience of unknown magnitude and absolutely excel at making it feel more understandable is mind blowing. Thank you!
I found the tutorial interesting, but right in the end you showed the clamp function and that was EXACTLY what I was looking for on my personal website, but didn't know existed. Thanks Kevin! You're awesome! As a Data Engineer/Backend Python Developer, I always learn new things with your videos.
As always, fantastic video! Your examples and explanations always make it easy to understand what a specific CSS feature is doing and why you'd want to use it.
fr you just made me fall in love with css bc i strugle with it a lot and dont understent some things but you explain it soo goood and easy. This is the first time I fully understand width auto. you just made my day
Because people do not talk much about these values, I thought it was not good practice to use them. Let's start using them more often! Great video as always!
Kevin... are you a psychic by chance? I just completed the NFT challenge on Frontend Mentor and the heading was bugging me because the hover effect would activate even when I wasn't hovering directly on it... I wasn't looking to fix it, to be honest. Was just gonna live with it... out of the blue I see this. Bam. Issue solved. Thank you. You always seem to have exactly what I need when I need it.
Thank You for your work Kevin! If you ever have time for something like that, i definitely would love to see more projects, big or small, that show how You work, all your mistakes and thought process so we can keep getting better at frontend and see how a project is built in real world.
Hi Kevin, you did 5vw + 1 rem while setting clamp values. I am wondering how you decided that 5vw + 1 rem should be good enough. Is there any video of yours that you can point me to learn to estimate this calculation? Thanks in advance :)
Hi, I love your tutorial, I learn a lot from them, but I really love to see you make a css modification to existing website and how to deal with it. Thanks 👍.
When i tried this on an element, it worked but the element was pushed to the left of the screen when it was in the center how i wanted it. A little help would be much appreciated, please.
Love your videos Kevin, but afterwards I desperately wish they where also transcribed / a condensed blog article for quick reference when I’m at my laptop. (If your curious what I mean, see Hacking With Swift Plus, articles are available as video and then transcribed as a blog with code / images)
I'm going to be making an effort to turn more of my video content into written content this year! It's in the plans... Just have to get a free things in place first 🙂
Great explanation Kevin. I would like to know how to have a background on that title that only goes as far as each line's content... So that when ir wraps the background of "our" doesnt go all the way to "projects"
Sir Kevin, can you please do a video where you explain how you determine the necessary values when using clamp. in your example this video you typed in 2rem, 5vw,+1rem, 5rem.... How did you know to use those values?? I've tried clamp and can never get it to work.
Great video as always! You used the clamp function for the font-size based on the vw; is there a similar solution to make the font-size responsive using the parent's size instead of the viewport?
I'm surprised there isn't a quick way to set a background per word yet. It looks rather unflattering when the background is always aligned to the longest word and surrounds all other, shorter words.
I had problems with browser supoort on max-content. Make sure you add supoort for all engines. Is the fit content depreciated? I think it works on Chrome, but we get an warning on Firefox.
Ok Kevin perhaps a topic for a 'short' - who knows but... I keep getting an issue with the top bar + menu area when displaying a full screen image that has "min-height: 100vh;" - so how do we display the image full screen taking into account the very top bar (normally tel, social icons, etc.) Plus menu and logo? Tried everything. Perhaps the answer is dead simple - PLEASE??? 🤔 I ALWAYS get the image going down more than the screen height... 🙋♂
The best way is probably too use JS to get the height of those other elements, then use a calc() and subtract that value from 100vh. Sounds more complicated written here than or actually is 😅
As Killyspudful said, that has other side effects as well, like no margin top and bottom, padding potentially overlapping items, and if you have more than one, one after each other, then they'd go next to one another
The main problem with it that when fit-content wraps text, it behaves the same way as auto does. It would be very cool if it could've shink after wrap, but seems like it's impossible in css :(
Yup, that's just not how it works, since everything is a box 😕. Though that did make me think of something that *might* work, but I'm on mobile so I can't test it right now. If it does, I'll make a video on it 👍
I found the tutorial interesting, but right in the end you showed the clamp function and that was EXACTLY what I was looking for on my personal website, but didn't know existed. Thanks Kevin! You're awesome! As a Data Engineer/Backend Python Developer, I always learn new things with your videos.
My favorite is fit-content, I usually put a max-width: fit-content; to solve the problem of changing after breaking
My favourite is chrome dev tools🐱
I just try all of them until they fit my content
One could say we now have a wide coverage of width values
Yes. The breadth of this episode was expansive. 110vw in fact.
there's no min to the content kevin will teach us.
@@easternadventures9978 all three of you shut up, i will clamp your asses
*Assets, meant graphical assets
I saw this thing like 1 day before I saw it on your channel but, man, Kevin, you really make me love CSS more and more. Even thought I'm on my path on self-taught web development and I'm just learning CSS, they way you explain it every single time amazes me. I'll be forever in your debts. Keep up the not good but the amazing work you do!
I made my first website in 1996 for a Quake clan I made with some friends in junior high. Back then, text was manipulated with the now defunct font tag, and anything layout related was mostly done with images and the background attribute. I was first introduced to CSS in the early 2000s when customizing my MySpace page. I didn't know it was CSS at the time. I started learning CSS in earnest in 2009, when Flash (I was a Flash developer) started to go belly-up. I consider myself a pretty advanced CSS user, but I don't really have time to keep up with all the changes since I went back to University and had 2 kids. This channel has been a really awesome way to just get little snippets of the most useful stuff to keep me in the loop. Thanks Kevin!
I remember those old days well! Glad I've helped you catch up, it's come a long way, lol
@dormie basne That would be interesting! I still have nightmares about the dreaded clearfix!
Unrelated question from a fellow Quake 1 player: What clan? :)
@@rolandking507 I can't even remember. It was not a successful one 🤣
Kevin’s ability to teach concepts like CSS(coding) to an audience of unknown magnitude and absolutely excel at making it feel more understandable is mind blowing. Thank you!
I found the tutorial interesting, but right in the end you showed the clamp function and that was EXACTLY what I was looking for on my personal website, but didn't know existed. Thanks Kevin! You're awesome! As a Data Engineer/Backend Python Developer, I always learn new things with your videos.
Ok, I have your CV now, i will email you for a job offer
As always, fantastic video! Your examples and explanations always make it easy to understand what a specific CSS feature is doing and why you'd want to use it.
fr you just made me fall in love with css bc i strugle with it a lot and dont understent some things but you explain it soo goood and easy. This is the first time I fully understand width auto. you just made my day
I have learnt a lot about max-content, min-content and fit-content. Thanks Kevin😊.
You have no idea how much your videos mean to me. I have learned so so so much. Thank you for information that you share!!!
Amazing!!! This is so so useful to know!!!
Thank you, Kevin ❤️
Thank you from Buenos Aires! Very helpful!
Great Video❤
Thank you Kevin Powell!! This tutorial was extremely concise and helpful!!!
Because people do not talk much about these values, I thought it was not good practice to use them.
Let's start using them more often!
Great video as always!
You always tell cool tricks, cool
I literally just used max-content today! Thought of the idea after learning fit-content a few months back from you its so helpful
Been looking for h-tag width issue for long, thanks kevin
Kevin... are you a psychic by chance? I just completed the NFT challenge on Frontend Mentor and the heading was bugging me because the hover effect would activate even when I wasn't hovering directly on it... I wasn't looking to fix it, to be honest. Was just gonna live with it... out of the blue I see this. Bam. Issue solved. Thank you. You always seem to have exactly what I need when I need it.
KEVIN, this is exactly what I needed!!!!! Thank you!!!!!
Thank You for your work Kevin! If you ever have time for something like that, i definitely would love to see more projects, big or small, that show how You work, all your mistakes and thought process so we can keep getting better at frontend and see how a project is built in real world.
My fav max-content have been using it where possible and I love it.
I knew of min and max-content. Never knew there was a fit-content as well which seems useful thanks 😊
Thanks!
The best explanation ever found, thanks!!!
This video is the holy grail of text widths!
Loving your content Kevin. Gets me pumped to get on the computer and make something
Very useful.Thank you.
Awesome tip and so very well presented. Thank you for sharing your knowledge. Great job Kevin.
Thanks kevin!
As usual it is perfect
Thank you keiv I didn't understand them well, Now I do 😊
Kevin your the best been learning from you for years now and purchased classes from you and will do more give me a deal!
Nice video its really helps me lot.
This really _widened_ my css knowledge :)
fit-content is AWESOME!!!
You are awsome, thank you very much!!
I found this information fitting.
Kevin - You explain everything so well!! Thank you. Hopefully, I will have money one day to buy a shirt and send money. Thank you once again.
max-content has workaround with display: inline-block and whitespace: nowrap, but min-content is INTERESTING!
Thank you :)
maybe a viodeo about animations? I know that you'll explain it in the best way possible :D great channel!!! keep the work goin!
I've heard you often say, "My students do this, etc.." Do you mean your students in scrumba or something else? Because I want to be one of them
Scrimba, and a couple of his bits there are free, plus also his conquering responsive layout course is free,
I used to teach at at a school for ~5 years
Yep I love max, min .. got to know about fit today
CSS guru!
Woooooow 🔥🔥
hi kevin. i always get confused with this optimal value in clamp what is this 5vw+1rem, cam you explain that one pleeeeeeeease. thank you
Love the shirt!
Hi Kevin, you did 5vw + 1 rem while setting clamp values. I am wondering how you decided that 5vw + 1 rem should be good enough. Is there any video of yours that you can point me to learn to estimate this calculation? Thanks in advance :)
lol turns out Kevin has already done this :
ruclips.net/video/U9VF-4euyRo/видео.html
Thank's Alot
Live your videos ❤️
fit-content is godsend tbh.
amazing
Hi, I love your tutorial, I learn a lot from them, but I really love to see you make a css modification to existing website and how to deal with it. Thanks 👍.
Thank you very much for the helpful and meaningful contents
The “fit-content” value is basically a simpler version of: min(max-content, 100%)
Good video
What is that clamp()? Please gimme the link for the video because I am too lazy to find it 😂
How are you multiline commenting in vscode? DFTBA and again great video!
You can place your cursor in multiple places with alt + clicking
When using clamp, why is your middle value a vw + rem as opposed to just a vw?
lol turns out Kevin has already done this :
ruclips.net/video/U9VF-4euyRo/видео.html
THANK YOU!
have you tried the clap() with min- max- fit-content as its params?
When i tried this on an element, it worked but the element was pushed to the left of the screen when it was in the center how i wanted it. A little help would be much appreciated, please.
Love your videos Kevin, but afterwards I desperately wish they where also transcribed / a condensed blog article for quick reference when I’m at my laptop. (If your curious what I mean, see Hacking With Swift Plus, articles are available as video and then transcribed as a blog with code / images)
I'm going to be making an effort to turn more of my video content into written content this year! It's in the plans... Just have to get a free things in place first 🙂
@@KevinPowell yay! honestly if I can help in some way I’d love to.
👍
How can I learn more about responsive font without using media query? How did you do in the video?
Oh, magic with CSS
Would there be many use cases you'd reach for max-content over fit-content then? Seems like it covers a lot more!
Do you have a video on clamp. This was the first time I saw it being used and it looked great.
ruclips.net/video/U9VF-4euyRo/видео.html
@@siddiqahmed3274 Thanks mate
Great explanation Kevin. I would like to know how to have a background on that title that only goes as far as each line's content... So that when ir wraps the background of "our" doesnt go all the way to "projects"
Wrap contents into span and add background on it. But making a rectangular background is impossible, unfortunately...
So max-content is like changing the display property to inline-block ?
Sir Kevin, can you please do a video where you explain how you determine the necessary values when using clamp. in your example this video you typed in 2rem, 5vw,+1rem, 5rem.... How did you know to use those values?? I've tried clamp and can never get it to work.
Keep trying numbers until it works? 🤣🤣
Utopia.fyi has a nice font-scale generator that uses clamp() as well.
Great video as always! You used the clamp function for the font-size based on the vw; is there a similar solution to make the font-size responsive using the parent's size instead of the viewport?
Not yet, but it's in the works!
In the meantime there is typetura (I have a video on that coming out in a week or 2)
@@KevinPowell ok got you on bell, looking forward to that soon. Thanks for your great content as always
How is fit-content different from display inline-block?
Hiii I tried the aspect ratio for image tag but it doesn’t work in safari .
Can you please make a video on Houdini
Hmmm, what happen if you set the width to max-content, and set the max-width to 100% ?
Was looking for this comment :) probably would work perfectly as expected
I'm surprised there isn't a quick way to set a background per word yet. It looks rather unflattering when the background is always aligned to the longest word and surrounds all other, shorter words.
i had no idea clamp existed
I had problems with browser supoort on max-content. Make sure you add supoort for all engines.
Is the fit content depreciated? I think it works on Chrome, but we get an warning on Firefox.
Is there any way to make it shrink to the longest line each time it wraps?
Thanks a lot for this!! But what abour clam() ;)
Ok Kevin perhaps a topic for a 'short' - who knows but... I keep getting an issue with the top bar + menu area when displaying a full screen image that has "min-height: 100vh;" - so how do we display the image full screen taking into account the very top bar (normally tel, social icons, etc.) Plus menu and logo? Tried everything. Perhaps the answer is dead simple - PLEASE??? 🤔 I ALWAYS get the image going down more than the screen height...
🙋♂
The best way is probably too use JS to get the height of those other elements, then use a calc() and subtract that value from 100vh. Sounds more complicated written here than or actually is 😅
@@KevinPowell Can you point to any good examples (that are simple...) ?
For max-content, I think a inline-block will be better?
#Kevin
Wouldn't setting display:inline achieve the same thing as fit-content, at least for a heading or paragraph?
Not without all of the other side-effects of losing 'display:block'.
As Killyspudful said, that has other side effects as well, like no margin top and bottom, padding potentially overlapping items, and if you have more than one, one after each other, then they'd go next to one another
I use fit-content almost every day lol
max-width: min(max-content, auto)
Can css function clamp() use the min-content, max-content, fit-content?
Good question, but I don't think so. Pretty sure it needs fixed values, but I could be wrong. Worth testing out!
The main problem with it that when fit-content wraps text, it behaves the same way as auto does. It would be very cool if it could've shink after wrap, but seems like it's impossible in css :(
Yup, that's just not how it works, since everything is a box 😕. Though that did make me think of something that *might* work, but I'm on mobile so I can't test it right now. If it does, I'll make a video on it 👍
You wrap the text in a span (I'm not sure if setting display:inline on heading will work) and then use box-decoration-break:clone
What about cross-browser compatibility?
All of them works on all modern browsers
@media ....?
Why fit-content is not a default behaviour ? Auto width isn't really intuitive...
Auto with is much more useful for layouts though!
max,min, fit content are useless. Just use display: inline-block, you dont need any things to do
I found the tutorial interesting, but right in the end you showed the clamp function and that was EXACTLY what I was looking for on my personal website, but didn't know existed. Thanks Kevin! You're awesome! As a Data Engineer/Backend Python Developer, I always learn new things with your videos.