@correlucas
Posted
👾Hello Jeremy Lloyd, congratulations for your new solution!
Your solution is great, the card is beautiful, the content is fine, the design too. All you miss here is to align the nft card vertically:
To do that you need to remove the margins from the container and add min-height: 100vh
to make the container align to the body height.
See the code changes below:
body {
min-height: 100vh;
background-color: hsl(217, 54%, 11%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
main {
background-color: hsl(216, 50%, 16%);
width: 350px;
height: 600px;
padding: 25px;
/* margin: 25px auto 100px auto; */
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0px 20px 0 15px hsl(216deg 58% 10%), 0px 20px 0 40px hsl(216deg 58% 10% / 40%);
}
👋 I hope this helps you and happy coding!
Marked as helpful
@jeremylloyd
Posted
@correlucas using the min-height is a great idea, I was previously using calc in the height property so your suggestion is much cleaner. Thanks!