Submitted almost 3 years ago

NFT Preview Card Component

Purnima Kumar•390

@purnimakumarr

A solution to the NFT preview card component challenge

Preview Code

Solution retrospective

Hey, if your review my solution please leave any comments you have.

There is one thing I coudn't figure out, the product image has a size of 332 X 332 px but the div containing it has a height of 336px so there is some unnessary gap below the image. It isn't visible but when you hover over the image and see the overlay effect you can see the gap below the image. There is no extra padding or margin in the element so, I can't understand why that is happning. If someone could help me with that, it would be great help.

Thank you.

Code

Please log in to post a comment

Community feedback

Tarek Mo•365
@tarek-mo
Posted almost 3 years ago
To remove that space under your image use display: block on your image tag, the reason behind this issue is that images are treated as text so the bottom is to accommodate for those pesky: "p,q,y,g,j" letters.
faizan•2,420
@afaiz-space
Posted almost 3 years ago
Hey @purnimakumarr, height:100vh replace with min-height: 100vh; of the body element.

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