Skip to content
Submitted over 2 years ago

NFT Preview Card Component

Purnima Kumar•390
@purnimakumarr
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Tarek Mo•365
    @tarek-moPosted over 2 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.

    1
    Purnima Kumar•390
    @purnimakumarrPosted over 2 years ago

    Hi Tarek, Made the change and it works just fine now. Thanks!

    0
    Tarek Mo•365
    @tarek-moPosted over 2 years ago

    @purnimakumarr anytime

    0
  • faizan•2,420
    @afaiz-spacePosted over 2 years ago

    Hey @purnimakumarr, height:100vh replace with min-height: 100vh; of the body element.

    0
    Purnima Kumar•390
    @purnimakumarrPosted over 2 years ago

    Hi Faizan, thanks for noticing. Changed it.

    0

Please log in to post a comment

Log in with GitHub

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