Design comparison
Community feedback
- @jonathan401Posted about 2 years ago
Beautiful solution as always 💫. I noticed you used the CSS clamp function. How does it really work? I mean I've used it before but really didn't understand how it works. Is there any tutorial you could point me to
1@karolbanatPosted about 2 years ago@jonathan401 The
clamp()
function let's you set the min size, "actual" size and max size in one line. The first value is the minimum size value, middle is the "actual" size value (or I would say the value or expression from which the size will be calculated), and the last one is the maximum size. It's like setting (for example forwidth
) themin-width
,width
andmax-width
in one line. But it actually let's you set boundaries when there is no actual way to set the min and max size (for example forfont-size
orborder-width
). In the middle value you can use expressions, as incalc()
function. You can use calc or omit it, it still will calculate the value.And as usual I recommend MDN docs and Kevin Powell's video.
Hope it helps 😊
1@jonathan401Posted about 2 years ago@karolbanat Thank you 🙌🏾. Sorry I can't find the 'mark as helpful' button 😅. I sure would have marked your comment as helpful!!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord