Skip to content
Submitted about 2 years ago

CSS flexbox responsive card component

accessibility
Elizabeth Sotomayor•230
@elizabethrsotomayor
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had some trouble with getting the image the right size initially. I set it to several different values/percentages but ended up leaving it as-is since it looked okay when it was inside of the card container. The <hr> gave me some trouble as I couldn't get it to look the same as the design mock up. When I gave it a margin of 1rem on top and bottom, the <hr> completely disappeared but when I made the values smaller it seemed to fix the issue. Thank you for any feedback!

Code

Please log in to post a comment

Log in

Community feedback

  • Mohammed Fakih•1,590
    @javascriptor1

    Hi Elizabeth Sotomayor ,

    Nice work. There is an active state design which I think you forgot to do. its acheive when you hover over he image , h1 tag and creator name in the design.

    Keep coding 👍

    Marked as helpful
  • Salah Shadoud•240
    @SalahShadoud

    hey there! nice work

    • you can use the gap property to set a fixed space between card childs instead of setting margin to each child element, i think it is a better way of spacing elements in a flexbox container and this way u can control the spacing from one place instead of dealing with multiple spacing properties.

    Happy Coding <3

    Marked as helpful

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