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

NFT preview card component

Ahmad 280

@AhmadIkhdair

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


NFT preview card component. Tried my best with the shadow and I'm satisfied with my work on this one.

Community feedback

@mraditya1999

Posted

For improved aesthetics and responsiveness, it is advisable to set the "max-width" property instead of a fixed width for the card element. By employing this single line of code, the card will adapt dynamically to various screen sizes, enhancing the overall visual appeal and ensuring a more responsive layout.

CSS:

.card {
  max-width: 250px;
  /* Additional card styles can be included as needed */
}

By setting the "max-width" property, the card will gracefully adjust its size up to the specified limit while retaining its original dimensions for smaller screens, ensuring an enhanced user experience across different devices and viewports.

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