NFT preview card component using CSS Flex

Community feedback

• 

  Santiago Moraga Caldera•710

  @Remy349Posted 11 months ago

  Hi @aazs-edu, congratulations for completing the challenge, the final result is amazing. I would just like to give you a couple of tips to improve your skills.

  • In the body, instead of using height: 100vh; it is preferable to use min-height: 100vh; to center elements.

    • With height you are giving a definitive height to the element, if the content needs more space it will overflow.

    • With min-height you are giving an element a minimum height, if you specify a lower height, the height that the element will have will be the value you assigned to min-height, min-height is not applied when the height is greater than min-height.

  • In mobile responsive design there comes a point where the design wants to break, this is because of the width: 340px; you use in your <div class="container"> tag, instead you can use a max-width: 340px; and in the <section> tag add a margin: 0 1rem; and remove the margin: 0 auto; you have in your <div class="container"> tag. This way you will have a better responsive design for mobiles.

  CONGRATULATIONS for completing the challenge, keep it up :)

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @aazs-edu!

  Your project looks great!

  I have just one minor suggestion for you to improve it:

  • Since the card is the main (and only) content on the page, you can replace your tag section with the tag main. We do that for accessibility and SEO purposes, it makes your HTML more semantic.

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  1