Frontend Mentor | NFT preview card component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello! congrats on finishing the challenge!. Nice work with the component!

  • First of all seems that your image is not loading properly, this is because you are not defining the relative path in your background-image correctly, try with background-image: url(./image-equilibrium.jpg);.

  • There is a bit easy way to center your component, instead of using margin: auto auto in the container, try giving flex to the parent element (the body), and center it, for example:

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  • And my final advice would be to start using relative units such as rems instead of px, using px is usually a bad practice and should be avoid!

  Hope my feedback helps you in future projects!

  Marked as helpful

  0

  ---

  

  Loo_cee•230

  @LooceePosted about 2 years ago

  @DavidMorgade thank you. I'd work on using rem more often.

  1
• 

  raionus•310

  @sinjin25Posted about 2 years ago

  Good job

  I think your image is broke on the github deployment.

  I was able to fix it on github by changing the url: url(..icon-view.svg) to url(icon-view.svg)

  A bit of padding to the right of the avatar and a bit less margin on top of the decorative bar might get it a little closer

  Marked as helpful

  0

  ---

  

  Loo_cee•230

  @LooceePosted about 2 years ago

  @sinjin25 thanks, i've done that. the image is visible now

  1