Skip to content
Submitted almost 2 years ago

Responsive product card with bootstrap

Lorenzo•130
@LorenzoTesoro
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

I'm new to programming. I'm learning js, vue.js, php and laravel. This is my first front-end mentor project, feel free to give me feedback about organization of the workflow and using of media queries.

Community feedback

  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    Hello, .....congrats on completing this challenge, well done 🎉 🎉 🎉

    But i noticed some things with your code and solution, **Hope this comment was helpful and made meaning to you **

    Firstly, consider wrapping your main content in a <main> other than a div

    Secondly, you can use a <picture> to add different images based on the screen-size, You can read more about the <picture> tag in mdn Docs or w3schools.com

    It's better that way than using display:none to render different images in your media query

    Hope this was helpful **Have fun coding 🎉 **

    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