Nft-preview-card-component-main

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Cesar, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add descriptive text in the alt attribute of the image
  • To make it look as close to the design as possible set width: 22rem; to container class
  • remove all margin from container class because with flex they are superfluous
  • for fix the hover effect add position: relative; to div with image class and set to inside div

  top: 0;
  width: 100%;
  height: 100%;`
  

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  0
• 

  Andrew Castro•85

  @Andrew-CastroPosted over 2 years ago

  This design works best if this card has a fixed width, in this case it's 350px. Avoid using percentages for widths as it doesn't lend itself well to responsive design (unless you're writing dozens of media queries to deal with it).

  Same goes for padding and margin, you can see the desktop and mobile designs have consistent spacing, so you're not going to want to use percentages for these values. Try playing with pixels or rem units for these.

  For example, the overall padding on the card is 24px on all sides, right now you're using 1.5% which is causing the padding to be a variable size based on screen width, if you set it to 24px or 1.5rem, this is be consistent with the design.

  There's more that could be improved on but I will leave you with this and help further if needed, good luck!

  Marked as helpful

  0