Product preview card component solution - HTML, SCSS
Design comparison
Solution retrospective
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).
No particular help requested.
Community feedback
- @JamesLavironPosted 2 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 GitHubJoin 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