Skip to content
Submitted 3 months ago

Product preview card component solution - HTML, SCSS

webdevbynight•410
@webdevbynight
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

What are you most proud of, and what would you do differently next time?

I used microdata to enhance semantics.

What challenges did you encounter, and how did you overcome them?

To stretch the image to fit the card height on desktop view, first I applied display: flex both on the image parent element and on its parent; but, the image did not stretch correctly on Safari. To fix, I forgot about flex and just added height: 100% to the image itself (and object-fit: cover to ensure the image remains well-proportioned).

What specific areas of your project would you like help with?

No particular help requested.

Community feedback

  • VictorGerfaud•210
    @JamesLavironPosted 3 months ago
    • Does the solution include semantic HTML?

    Yes it does.

    • Is it accessible, and what improvements could be made?

    It's accessible

    • Does the layout look good on a range of screen sizes?

    It looks very good, seems weird on breakpoint transition but nice solution!!

    • Is the code well-structured, readable, and reusable?

    Yes it is. However it seems like you decided to use complex css stuff. You could have done something far easier to maintain but I assume you wanted to work on it :)

    • Does the solution differ considerably from the design?

    Not at all, it's very precise (maybe too much precise haha)

    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