Skip to content
Submitted over 1 year ago

CSS flexbox responsive card component

Elizabeth Sotomayor•230
@elizabethrsotomayor
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

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!

Community feedback

  • Mohammed Fakih•1,590
    @javascriptor1Posted over 1 year ago

    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
    1
    Elizabeth Sotomayor•230
    @elizabethrsotomayorPosted over 1 year ago

    @javascriptor1 Hey, thank you for pointing that out. I totally missed it! Much appreciated :)

    0
  • Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    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
    0

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