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

Responsive HTML and CSS nft-card box

Arda 180

@deserthawk

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Thank you in advance for all your well-intentioned criticisms during my development. We can achieve the same result in different ways. Please indicate if you think there are more appropriate and practical ways to resolve.

Community feedback

Nam HaÏ 820

@Nam-Hai

Posted

I think it's a wierd choice to have a differente margin-top value as margin-left and margin-right for the .box-image. Either way, nice use of the flexbox. Good use of max-width and min-width too.

Try to avoid % for height and width tho or at least be carefull. Here when on mobile laylout, the over effect is bigger than the image. To fix the probleme, two solution, set a fixed height and width for mobile. But you would not learn much from that hehe. You could also, put the over effect and the image in the same container, which would have the width and height of the image, and give it overflow: hidden I hope i was clear ^^

Marked as helpful

0

Arda 180

@deserthawk

Posted

@Nam-Hai Thank you for the feedback. This was the part I had the most difficulty with. I'll keep an eye out for this hover part.

0

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