NFT preview card component

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  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

  @moonrose93Posted over 1 year ago

  @asbhogal thanks a lot! :D

  1

  

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  @moonrose93 no problem :)

  0