NFT preview card with HTML/CSS flex

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Hey @jdevelops, congrats on completing this challenge!

  I had a look at your final solution and I have a few suggestions that I hope will be useful to you:

  • You can vertically and horizontally center your .main-box by using flex display on your body element

  • There's an issue with the responsive design when scaling down to smaller screen sizes. I suggest not using fixed px values for your width as it can make it more difficult when building a responsive design. Have a look through your media queries code and see what improvements you can make

  • Adding a little transition on the image hover effect would be a nice bonus ;)

  Overall, you did quite a nice job. Keep up the good work!

  Marked as helpful

  2
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @jdevelops ~

  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.

  • 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.

  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 ~

  Marked as helpful

  2

  ---

  

  jdev•50

  @jdevelopsPosted almost 3 years ago

  @tymren608 Thank you soo much for BEM tip, it is really helpful even in small projects !

  0