@elaineleung
Posted
Hi Vincent Daniel, first off, well done in building this solution, which looks great on the whole. Just wanted to address the points you made in your note:
About clamp()
, I used to be quite confused about it and didn't find it useful, that is until I came across this CSS-tricks article on how clamp() works. There's a bit of math, but I think the explanation is really clear on how it can be used, and most importantly, they provided a little tool where you just need to input the min and max screen sizes and well as min and max size of the element. I have this bookmarked and use it every time I need clamp()
, and it has made things so much easier for me.
About min()
, you can try width: min(100% - 2rem, 19rem)
in your mobile view. What this means is that the browser will either choose 100% - 2rem
(the 2rem is for the left and right margin around the component at 1 rem each), or it will choose 19rem, depending on which one is smaller. The only other thing you'd have to do is to add some padding in .card
, remove the side padding in the button and give it a width of 100%.
I encourage you to keep experimenting with min()
, as this is a really powerful and useful tool, one that I use in every single project ever since I learned about it from Kevin Powell. Good luck!
Marked as helpful
@davinceey
Posted
@elaineleung thank you soo much again for this feedback! I actually had some other questions for you after you reviewed my nft card component of which I learnt greatly from as I went ahead to Kevin Powell's tutorials. If there is a way of contacting you, I would be grateful. Thank you once again!
@elaineleung
Posted
@davinceey No problem at all Vincent, glad to help! You can DM me on Twitter if you have it (link should be in my profile), or you can also find me on Slack in the FEM workgroup.
Marked as helpful