Skip to content
Submitted almost 2 years ago

Responsive product preview card, using flexbox

Adriana•60
@AdrianaMagdalena
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My biggest issue was with setting background-image property. I'm only used to putting <img> tag in html and providing source to the picture there, but in this project I felt I had to create a container for the picture and use css background-image property. I don't have a proper understanding of this method and all the background-size, and background-repeat properties, so my design kept being wonky for a long time without me understanding why. Even when I succeeded to put it toghether properly, I'm still not sure if my method is the best solution. I'd be extrememly grateful for feedback on it.

Code

Please log in to post a comment

Log in

Community feedback

  • Rino•340
    @Rhinozer0s

    Hello Adriana ✌️

    I have a recommendation to solve your issue with the background.

    For responsiveness it is usual to use the Picture-element

    • The <picture> element contains two tags: one or more <source> tags and one <img> tag.

    • in the <source> tag you can define your media queries

    In your case it could look like this:

    <picture>
<source media="(max-width:600px)" srcset="images/image-product-mobile.jpg">
<source media="(min-width:600px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-desktop.jpg" alt="Product">
</picture>

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • Tushar Biswas•4,060
    @itush

    Congratulations on completing the challenge! 🎉

    Welcome to the platform!

    Yes, for projects like this we need to figure out a way to toggle images. There are multiple ways to do that and using background-image property is perfectly fine in this situation. You might want to play with this approach for couple of projects first... and once you are comfortable with the approach and using background shorthand etc. then you may explore other methods.

    Your final solution looks nice. However I'd like highlight the following to make it nicer :)

    • Looks like there is a typo in the body declaration block height: 100dvh;

    • .wrapper may need some top margin for mobile-view.

    • Try using more html semantic elements, and avoid divs as much as possible.

    Feel free to checkout my live site and project code I've used html semantics and background shorthand.

    Once again you have done a wonderful job.

    And I look forward to see cool projects from you in the future🚀

    Keep at it...💻 Happy hacking!

    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