NFT preview card component

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  good work. But there is some room for improvement.

  • Firstly using fixed paddings to center the card is not a good idea as it wont work for all browser sizes, instead use GRID or FLEXBOX like so:

  .back { background-color: hsl(217, 54%, 11%); min-height: 100vh; display: grid; place-items: center; }

  • instead of width: max-content in .container, have image: width: 100% to get rid of the extra space on right side, if image gets distorted, use object-fit: cover; keep its aspect ratio.

  • Finally try to avoid giving fixed heights or max-heights for text containing elements like you have for .container, even if it is in rem, because it can cause issues later on (with changing dynamic data, when the user changes font-sizes, or even browser rendering issues etc.)

  Hope you find this feedback helpful!

  0