min(), max(), and clamp() are CSS magic!
291,815
Published 2020-04-21
Until Safari gets there too, we can use it, but with the help of feature queries, which I made a video on here: • Using Feature Queries (@supports) to ...
If you'd like to learn more about viewport units like `vw` and `vh`: • CSS Units: vh, vw, vmin, vmax #css #r...
#css #responsive #typography
--
Come hang out with other dev's in my Discord Community
discord.gg/nTYCvrK
---
Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically refresh your bro...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: www.instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
All Comments (21)
-
Maybe important to mention that SCSS can get confused if it encounters a CSS min or max function because SASS has conflicting functions. For example min(200px, 80%) will cause a SASS units error. The trick is to capitalize: Min and Max so they are ignored by SASS (CSS is case insensitive)
-
I thought I was pretty good at CSS until I discovered your channel.
-
Whenever I have a issue with CSS or just want to learn a new property. I’m always so happy when I can find a video from Kevin explaining the subject! His a CSS magician ✨
-
Your channel is sooo nice !
-
Works in all modern Browser: font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); e. g. font-size: calc(2.25rem + (36 - 20) * ((100vw - 300px) / (1600 - 300)));
-
This, I've dreamt about for so so long. Not back in '94 when I started coding HTML3.2, but it's definitely been years.
-
I'm two weeks into seriously learning html and CSS and keep coming to your videos because they're awesome. You are one great teacher
-
Just love it! Great for replacing some media query. .row { width: clamp( min( 95%, 414px ), 80%, 1200px ); } Thanks Kevin for making us better devs.
-
I am absolutely baffled at the quality of content you put out, Kevin. Direct, crystal clear, practical videos of everything relevant. No BS. I have been working as a frontend developer for around 14 months now, and I stumbled on your channel while searching for Intersection Observers. Love the content! Subscribed to the channel and will sign up for the newsletter too. Thank you for your time and effort in giving back to the community. Much appreciated.
-
Really enjoy your videos. I spent most of my career from the 90's onward doing systems programming in C, C++ and Java, but now that the money is in front end, I'm digging all these modern toys and tooling.
-
Oh boy, I have an itch to go back to all my projects and use this! Thank you for such a clear explanation!
-
I guess you can never know it all when it comes to CSS, thanks Kevin, you are doing a great job.
-
Loved the usage of clamp() function with the font-size property and also learning about "vw" units. This is very handy and useful for web design. Thank you Kevin for this great video!
-
It's interesting... something that maybe wasn't clafiried it's about with the 'min' and 'max' functions as well as the clamp one. One of the both values must be a relative unit such as percentage or viewport. With the clamp function this concept is applied on the 'ideal' value. Thanks Kevin for all the information you share!
-
Started coding websites professionally about two years back. Your videos really helped me out back then and still do today :)
-
OMG you SAVED ME. I'm just starting out but I wrote a webpage using TEN MEDIA QUERIES just to make the simple home page responsive and now with this I don't need a one. THANK YOU.
-
Finally! I've been enlightened. Thank you, Kevin.
-
just before one hour, i wrote these line of code: width: max(min(10vw, 250px), 150px); because I had never heard from clamp() function! And after I watched your video, i realized that I can change this to clamp(). thanks 👍
-
your channel is incredibly enllightening Kevin🤩
-
you singlehandedly saved me from losing many hours of sleep last night. thank you king
