Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Card Challenge

Henrique 110

@henmachuca

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@M0hamedF

Posted

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

@henmachuca

Posted

Ok @M0hamedF ,

Got it now! Thank you for your patience.

1

@M0hamedF

Posted

@henmachuca Happy to help 😄.

Marked as helpful

1

@M0hamedF

Posted

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

@henmachuca

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord