Skip to content
Submitted over 2 years ago

Product preview card component

Kindness•10
@Atsue-Kindness
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. Making the card responsive was a bit difficult but I completed it
  2. I have a space below the card image, I have inspected and checked my code but I can't seem to figure it out
  3. Please what's the best practice for building a product card

Community feedback

  • Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Hello 👋, Nice job on completing this challange.

    • To remove the space below the images you can use display: block on the image tag itself and if you want to learn more about why this happening you can read this article Removing White Space Below Image Elements
    • To fix the accessibility issues its better to use main tag instead of the div tag as the card container

    Hope this helps , Happy Coding 😊😊.

    0
    Kindness•10
    @Atsue-KindnessPosted over 2 years ago

    @ahmedAgawad Sure thanks a lot

    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