Submitted

NFT - Html + CSS

P
Chris 190

@Chris94Lee

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

3

Accessibility Issues

0

HTML Issues

View Report

Chris’s questions for the community

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

P
Benja.min 310

@BenjaDotMin

Posted

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


P
Chris 190

@Chris94Lee

Posted

@BenjaDotMin That worked, thanks a lot!

1

Give some feedback to @Chris94Lee about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!