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

Responsive NTF card using flexbox

@CoderKnight02

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


I am excited this is my second problem solved, I overused flexbox on my solution this time but I'm on my way to learn grid layout. I got stuked on how to make the hover elements appear and disapear but i googled it and saw a preaty interesting solution. Any suggestion on how to solve the problem diferently is more than wellcomed.

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Manuel, congratulations for your solution!

The component is really good done and almost perfect, all you need to do to have it optimal is to remove the container height because since you've set the height as a fixed value, the component height cannot grow more than the value you've used. Note that when the container shrink arrives to a point where the text starts top pop out the container, to fix that just delete the height, the container height is defined by its elements and inner paddings, so its adjusts automatically.

Here's the code I'm referring :

.card {
    /* height: 570px; */
}

Hope it helps and happy coding!

Marked as helpful

0

@CoderKnight02

Posted

@correlucas I am updating my solution, Thank you so much, I really appreciate your help.

0

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