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

moonrose93 370

@moonrose93

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@asbhogal

Posted

Hi Isidora, great work! The design and content matches very closely to the mockup.

Just a few things I've noticed:

  • Because of your width and position values for your child elements, it's causing overflow issues between 320px and 480px. If you have a look in the responsive viewer of the dev tools, you'll notice this on your end. Ideally, you shouldn't place explicit height or width values on child elements, instead let them occupy the natural space they require, and set a max-width value on the parent container, with a width: 100%.
  • You could probably use flex or grid instead of setting the position values for the above elements, and using the gap property to apply some of the spacing
  • Your img requires an alt attribute for screen readers and other assistive technologies to understand the purpose and context of the image. As well as for accessibility, it also helps crawlers understand for SEO (worth knowing about this now before scaling up to full-page applications)
  • Also, all your values should be in rem not px. Grace has a good article explaining this Link

Hope this helps!

Marked as helpful

1

moonrose93 370

@moonrose93

Posted

@asbhogal thanks a lot! :D

1

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