Skip to content
Submitted almost 3 years ago

NFT - Html + CSS

Chris•240
@Chris94Lee
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

Been a while since my last submission so thought I'd start with this new one.

Can someone please explain why my .imageContainer class has a height of 306px which causes the extension at the bottom when hovering over the image? As far as I'm aware the height of this div should be that of its contents? The largest element inside this div is the image, so why is there this extension at the bottom?

Community feedback

  • Benja.min•740
    @BenjaDotMinPosted almost 3 years ago

    Heya Chris,

    Add: .imageContainer .mainImage{display:block;} to your css, and this should fix your issue :)

    Images are display inline by default, so it always causes some weirdness with vertical spacing, as the box model doesn't tend to support top/bottom with inline elements.

    Marked as helpful
    1
    Chris•240
    @Chris94LeePosted almost 3 years ago

    @BenjaDotMin That worked, thanks a lot!

    1

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