NFT Preview Card Component with Flexbox

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Abieb_Guardian, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

  Flex-box:

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; // just if the body has two child
      min height: 100vh;
  }
  

  GRID

  body {
      display: grid;
      min height: 100vh;
      place-content: center;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Abieb_Guardian•200

  @AbibGuardian50Posted almost 2 years ago

  @AdrianoEscarabote halo adrian,i'm fine and thank you to give feedback and great answer for my question. I learn something new and just realize never know that place content syntax is exist Thank you and have a great day

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  Hello Abieb, You have done a good work! 😁

  Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • Using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  0

  ---

  

  Abieb_Guardian•200

  @AbibGuardian50Posted almost 2 years ago

  @denielden Hi Deniel Den,thank you for your solution I want to ask again,when we use px as absolute units? and can i use rem for every element on css or html? Thank you ,have a great day!

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @AbibGuardian50 You are welcome and keep it up:)

  I advise you to always use the rem

  Marked as helpful

  0
• 

  suhayb jirde•1,050

  @suhaybjirdePosted almost 2 years ago

  well done only try to centre the card vertical

  0