Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Art Gallery Website

Karol 1,620

@karolbanat

Desktop design screenshot for the Art gallery website coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Kehinde 660

@jonathan401

Posted

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

Karol 1,620

@karolbanat

Posted

@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 for width) the min-width, width and max-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 for font-size or border-width). In the middle value you can use expressions, as in calc() 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
Kehinde 660

@jonathan401

Posted

@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 GitHub
Discord logo

Join 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