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 Component

@zach007james

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I still can not figure out how to vertically center my <main> element. I have tried align-items with flex multiple times but it just doesn't work. I would love to hear any feedback on how to align any div element to the center relative to the screen size of the browser.

Would also love any other tips you could give me. Currently learning responsive CSS, although not doing great atm.

Community feedback

@guilleoem

Posted

Hi @zach007james. Remove margin-top: 8vh; property in main, then change the height of the body to 100vh instead of 100%.

0

@ComanderPotato

Posted

To centre a div, the flex properties have to be set on the parent element of the div you want to centre. Centre also takes into account the height of the parent div, so say if you have a landing page and want something right in the middle setting the parent element to height: 100vh; should centre it.

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