NFT-preview-card-component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Sai, great work!

  I had a look at your solution and I have a few suggestions to improve your code:

  • remove margin from .card class
  • For center the card give Flexbox and height property to the body. Note: Flexbox aligns to the size of the parent container.
  • You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.
  • for the internal spaces of the containers of the elements try to use the padding instead of the margin
  • for fix and improve the position of the card-image-hover class changhe in top:0 the top propriety and add position: relative; to the .card class. In this way it will absolutely position from top itself within the space of its parent container

  Also to make it look as close to the design as possible, reduce shading of card :)

  Overall you did well, keep it up!

  Hope this helps and Happy coding!

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @SaiThihan ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
  • I suggest you to try transition on hoverable elements like image, heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • Image tags must have alt attributes as standard.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  1

  ---

  

  Sai Thi Han•20

  @SaiThihanPosted almost 3 years ago

  @tymren608 Thanks a million for sharing tips.I will note this down and use my next projects.

  0