Skip to content
Submitted over 2 years ago

NFT Card

Trevor•200
@Tactenator
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

Hello, everyone!

Feel really good about this one! No real difficulties.

Only thing I ask is if something is glaringly wrong or could be done better to please let me know! Thank you very much!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Trevor, congratulations for your new solution!

    As always a great solution! The only thing I think you should change is the properties to make the image responsive, note that when the card scales the image lose its proportions.

    Here's my tips for you to fix the image responsiveness:

    ADD display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

    img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

👋 I hope this helps you and happy coding!
    Marked as helpful
    1
    Trevor•200
    @TactenatorPosted over 2 years ago

    @correlucas Hello Lucas!

    Ah, I did indeed forget that. Thank you for catching that. I will fix that right away.

    Thank you once again for your help! It is truly greatly appreciated :)

    Take care!

    1

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