Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML, CSS

Els G 180

@elsgoossens

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Thanks for all the valuable feedback, I learned a lot with this challenge. Awsome !

Community feedback

P
Amy 130

@aeposten

Posted

The gap below your image is because your image is rendered as an inline element by default. If you change the display property of the div it's nested in (the one with class of main-img), it will remedy this. This article on Geeks for Geeks does a great job of explaining why this happens: https://www.geeksforgeeks.org/how-to-get-rid-of-the-gap-under-the-image/

Marked as helpful

2

@SinisaVukmirovic

Posted

Hello!

About your questions:

1.Thats how the web works since its creation. More about it and how to fix it

2.If I understand you correctly, its aligh-items, not justify-items. But, in order for it to work, you need to have 2 elements. Right now, you have an image and just text, text is not an element, its just a node. Wrap text in an element.

Hope this helps!

Marked as helpful

0

Els G 180

@elsgoossens

Posted

oh my, so simple to fix with only the right information. Thank you very much.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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