NFT Card Challenge

Community feedback

• 

  Mohamed Fathy•160

  @M0hamedFPosted almost 3 years ago

  Hi Henrique

    height: 100vh;
    display: grid;
    place-items: center;
    margin: 0;
    background-color: hsl(217, 54%, 11%);
  }
  
  main{
    background-color: hsl(216, 50%, 16%);
    /* width: 18%; */ width: 250px;
    border-radius: 10px;
    /* margin: 150px auto; */
    padding-top: 20px; 
  }```
   I changed these 2 parts in your code try it now
  i replaced margin: 150px auto;``` with   height: 100vh;
    display: grid;
    place-items: center;
  

  1

  ---

  

  Henrique•110

  @henmachucaPosted almost 3 years ago

  Ok @M0hamedF ,

  Got it now! Thank you for your patience.

  1

  

  Mohamed Fathy•160

  @M0hamedFPosted almost 3 years ago

  @henmachuca Happy to help 😄.

  Marked as helpful

  1
• 

  Mohamed Fathy•160

  @M0hamedFPosted almost 3 years ago

  Hi Henrique Great job 🎉. I will suggest a few adjustments

  • To center the card better use height: 100vh; display: grid; place-items: center; in the body instead of margin: 150px auto; For more info about Grid 1- w3schools. 2- MDN Web Docs.
  • Use a px width instead of the % in the main
  • Use cursor: pointer; in ```:hover`` to change the cursor Keep the good work 👍👍👍

  1

  ---

  

  Henrique•110

  @henmachucaPosted almost 3 years ago

  Hello @M0hamedF,

  Thank you very much for the tips! I changed my width to a px instead of % so it does not change when I shrink my window and also made the change to the cursor. As for the body/main change, the only thing I did not change was the height: 100vh in the body, cause when I did so the inner card became to stretched. Did I do something wrong?

  But anyhow, thank you for all the tips! Really helps me to improve.

  0