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 nft-card

Maobugichi 390

@Maobugichi

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


What are you most proud of, and what would you do differently next time?

learned and applied BME

Community feedback

Adriano 36,730

@AdrianoEscarabote

Posted

Hi Maobugichi, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

Note that in higher resolutions the card is increasing a lot, damaging the design of the project, so to fix it we can do this:

.main__item {
    max-width: 340px;
}

Always prefer to use max-width, it will define a maximum width for the card, so in higher resolutions, that is, on larger screens, the card will retain the same appearance

The rest is fantastic.

Hopefully, you'll find it helpful. 👍

Marked as helpful

0

Maobugichi 390

@Maobugichi

Posted

thanks alot, addressing that right now@AdrianoEscarabote

1
Abhi 220

@abhi-zero

Posted

Hey bro, you used position: absolute for your overlay. If you want the image hover effect to match the given task/project, you need to use the opacity property. Set the overlay's opacity to 0 initially, and then change it to 1 in the hover rule. The value 0 will hide the overlay, and the value 1 will make it visible.

0

Maobugichi 390

@Maobugichi

Posted

hm, same solution. did you look through the site or just the code?, i just added a bit of animation@abhi-zero

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