Skip to content
Submitted almost 3 years ago

Responsive HTML and CSS nft-card box

Arda•180
@deserthawk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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-HaiPosted almost 3 years ago

    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
    @deserthawkPosted almost 3 years ago

    @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

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