NFT Card Component

I would suggest using a designing platform to measure the height/width & padding/margin.

• Figma or Adobe XD would do the work!
• For the CSS part I would accept the victors recommendations.
• I would recommend avoiding using px as a unit instead I would suggest replacing them with rem

Happy coding 😀

Hey @anthony

Good job on this! I'd like just to add few tips:

first, to perfectly center the card, this code can help:

.card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

secondly, try to increase the width of the card on mobile and reduce the h1 size

try until it's perfect

good luck:)

Hey,

• If you check the body height by opening Developer tools and hovering over body, you can see right now the body takes half of the screen only, you can change that by adding min-height: 100vh to the body
• You used flexbox's align-items: center already which will center your card to the middle of the 100vh after setting the min-height as well.
• Right now the card's width is 25% and the thing with that is that if you change the screen size for 750 pxs for example it will be 25% of 750pxs and its not getting bigger, one way to go around this is setting card width to width: min(25rem, 85%) for example, so until 85% of the page width is bigger then 25rem it will use 25rem, if the 85% becomes less then 25rem the card will use that, basically its always using the smaller value.

I tried to be more detailed so it serves you a little bit better and I hope it helps you!

If you want to center the card use CCS grid. Using the property place-items:center once your container is a grid, the card will center in your container.