NFT preview card component

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great work on this challenge!

  I noticed that when the page's width expands beyond 1440px, the card is no longer centered on the page.

  This is because you've set a max width of 1440px on the <main> element.

  By removing this property, you allow the page to span the entire width of the viewport, which keeps the card centered on the page regardless of what screen size the user's device is.

  I also noticed that the card isn't vertically centered because you've set the height of the main element to fit-content, which is causing the height of the main element to take up only as much space as it needs as opposed to the entire viewport.

  If you remove this property and replace it with min-height: 100vh, this will set the height of the main element to 100vh initially and allow it to grow if necessary.

  As a result of this, your card will always be vertically centered on the page.

  main {
    height: fit-content; ❌
    min-height: 100vh;
  }
  

  Finally, on smaller screen sizes, your website isn't very responsive due to the hard-coded widths of your card and NFT image.

  You can make your page more responsive like so:

  .preview-card {
    width: 350px; ❌
    max-width: 350px;
  }
  
  .equilibrium {
    width: 302px; ❌
    height: 302px; ❌
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  
  .preview-card .ETH-num {
    margin-right: 7rem; ❌
    margin-right: auto;
  }
  

  width: 100% combined with aspect-ratio: 1 / 1 means that the NFT image will take up all the available space within the card while maintaining a square shape, which allows the image to grow and shrink without being distorted or stretched.

  margin-right: auto pushes the two elements as far apart from each other as possible while still allowing the card to shrink if necessary.

  Other than that, this is a very good solution to this challenge!

  Hope this has been helpful! :)

  Marked as helpful

  1

  ---

  

  Ahmed•140

  @Xandros9Posted 9 months ago

  @Venus thank you for the this tips and you time to reading my code

  1