Wow, thanks for breaking that down, you made it easier to understand, I liked when you typed in the clamp parameter meanings (min, pref , max), it helps visualize and understand what's going on
This was SUPER helpful, especially how you broke down the formula for calculating the viewport height relative to the rem units in the clamp, I was really struggling with how to set that value. Thank you for the excellent video!
Top explained. Calculating the intermediate value was always the most difficult part for me. I now use an online calculator where I can calculate the perfect value for the size at which the text starts to grow or shrink. I use the ‘Clamp Calculator’ from Marc Bacon. Since then, I can now calculate the mean value exactly and say that the font should start to grow from 600 px, for example, and must stop growing at 1200 px.
Great insight, thanks. I have a logo which the client wants to keep consistent to screen sizes, so I've used VW for the logo size. At 1100px viewport, the logo is 8vw, but down at 380px viewport, the logo size is 22vw. Is there a way to 'clamp' or 'calc' this so the vw increases as the viewport decreases? (I'm a total newbie with CSS). Thanks.
If I get your question correctly, I think your solution here might still be clamp by doing something like clamp(minsize, 7vw, maxsize), you're able to ensure that the size of the logo never goes below minsize, and never goes above maxsize i don't think you can do a "if viewport increases, decrease the element, but if viewport decreases, increase the element" without javascript involved does this help?
@@deeecode Thank for taking a look. I almost have this but it does jump on tablet sizes. Please give it a go and have a look. clamp(12vw, 12vw - 0.8vw, 5vw)
@@deeecode The best way I can describe this is a 'reverse clamp'; Let's say on desktop I have an image which is 10vw. But on mobile, 10vw is too small. So on mobile I need the image to be 20vw. An increase from 10vw to 20vw as the screen gets smaller.
Hi, what's this "browser" on the left side of the screen (I can't find out)? I didn't know about the clamp functionality (newbie), your explanation helps a lot. I just try to find my way into Bootstrap Studio. Thanks & regards
I found the answer myself - it's simple. It's Google's Chrome browser. I had no need to use it before. Other browsers have comparable abilities (Safari, Firefox), but it seems easier (to me) to use Chrome for this task.
Bravo. You've explained clamp better than the TH-camrs with a million followers.
Glad it was helpful!
Very helpful, your explaining is very smooth and easy to understand even for a 5 year old... your channel needs more support and subs❤
Thank you for the kind feedback! I’m so glad you enjoyed this video
This is so simple and to the point, you are killing it man! Thank you so much!
You're very very welcome! I'm glad to hear
Wow, thanks for breaking that down, you made it easier to understand, I liked when you typed in the clamp parameter meanings (min, pref , max), it helps visualize and understand what's going on
yeah it took me a lot of time to understand clamp, and i wished that someone really visualized it this way for me...so that's why i did it this way
Wow. This is the easiest explanation/tutorial I've come across on this subject. Thanks!
i'm really glad to hear
You are good in explaining codes Bruuuh!!!!!!!!
i'm so glad to hear that enjoyed the video
This was SUPER helpful, especially how you broke down the formula for calculating the viewport height relative to the rem units in the clamp, I was really struggling with how to set that value. Thank you for the excellent video!
I'm so glad to hear that my detail was helpful :)
clear as crystal! so easy to understand! Thanks man!
this video was great, I've seen many videos so far, but this video can help me understand this concept in css, thank you very much!
i'm really glad to hear that this was helpful
Actually the best explanation on the web. Thanks! Liked & subscribed
i'm so glad to hear. thanks for subscribing
one of the best explanation videos of CSS clamp
i really live it💗💗💗💗💗💗💗💗
Happy to hear that!
You born to be a teacher❤
thank you so much for this kind feedback
Top explained. Calculating the intermediate value was always the most difficult part for me. I now use an online calculator where I can calculate the perfect value for the size at which the text starts to grow or shrink. I use the ‘Clamp Calculator’ from Marc Bacon. Since then, I can now calculate the mean value exactly and say that the font should start to grow from 600 px, for example, and must stop growing at 1200 px.
i'm so glad to hear that my approach simplified things for you
Nice one🤝
I'll try using it in my upcoming projects
From LinkedIn btw 🌚
Thanks for visiting :) Glad you enjoyed this video
Nice and simple explanation. Good job, man. Thank you.
You’re welcome ✨
very well explaind my guy. thanks
this is what i looking for! thank you for your video! loved it!
i'm glad to hear
the best explanation man
Great insight, thanks. I have a logo which the client wants to keep consistent to screen sizes, so I've used VW for the logo size. At 1100px viewport, the logo is 8vw, but down at 380px viewport, the logo size is 22vw. Is there a way to 'clamp' or 'calc' this so the vw increases as the viewport decreases? (I'm a total newbie with CSS). Thanks.
If I get your question correctly, I think your solution here might still be clamp
by doing something like clamp(minsize, 7vw, maxsize), you're able to ensure that the size of the logo never goes below minsize, and never goes above maxsize
i don't think you can do a "if viewport increases, decrease the element, but if viewport decreases, increase the element" without javascript involved
does this help?
@@deeecode Thank for taking a look. I almost have this but it does jump on tablet sizes. Please give it a go and have a look.
clamp(12vw, 12vw - 0.8vw, 5vw)
@@deeecode The best way I can describe this is a 'reverse clamp';
Let's say on desktop I have an image which is 10vw. But on mobile, 10vw is too small. So on mobile I need the image to be 20vw.
An increase from 10vw to 20vw as the screen gets smaller.
When converting Figma UI into React, would pref (min, pref , max) be the actual font sizes or width specified??
pref is usually relative...like percentages or viewports
Hi, what's this "browser" on the left side of the screen (I can't find out)?
I didn't know about the clamp functionality (newbie), your explanation helps a lot.
I just try to find my way into Bootstrap Studio.
Thanks & regards
I found the answer myself - it's simple. It's Google's Chrome browser. I had no need to use it before. Other browsers have comparable abilities (Safari, Firefox), but it seems easier (to me) to use Chrome for this task.
You're welcome! Actually it's Edge I'm using
idk why its been so hard for me to wrap my head around this, thank you 😅 also theres a vscode extension that can convert px to em and vice versa
haha yeah i discovered the extension much later
What about columns and rows..?? Can clamp be used for anything else apart from fonts..??
Yes you can using it for padding height width
This was amazing. Thank you so much!
you're very very welcome :)
Nice this is huge. I just used a Clamp function in my project 😅
Nice to hear :)
Deeeecode 🔥
I have also seen other videos, but your method is easier to understand. Please share the standard clamp formula for h1, h2, and other tags?
i'm glad you found my approach better. i don't really know a standard...it depends on the style guide defined by different companies
Really great explanation! Thank you
I'm glad to hear
I love your channel!!!!
So glad you do...you're welcome!
Excellent. I wonder when it will be adopted in tailwind…
I don't know tailwind enough to answer this soorry
please, are there any potential dangers of using percentage in all your font sizes...if so...pls let me know. I need reply please
hi sorry i'm just replying...there are usually no dangers, as long as it is controlled (boundaries), just as you have with clamp
Yup yup.
This is the kid.
Great tutorial.
You're welcome!
Great
You're welcome!
Thankss
You're very welcome!