Skip to content
Submitted over 2 years ago

Product Preview Card Component using Flexbox

Max Lockwood•60
@Max88-git
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! I would be grateful for any feedback on my solution to this product preview card challenge.

If you have any suggestions on how I could better position the image for mobile, I would appreciate it! It's not quite the same as in the design files.

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Maxime•430
    @maxime927

    Hi Max, hope you're fine :) Your solution is really great, simple and efficient !

    Concerning the position of the picture for the mobile, it should be better to have a second image for mobile, or in this case, and considering that every picture will be like this, you can add to the .card-img style, the attribute : object-position: 0 -100px; for mobile. it is just about the position of where your image will start with the two axes x an y.

    But i prefere to use the picture tag and precise 2 different sizes for my image like this :

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

    Reverse the media query if you prefer the desktop first approach.

    Hope it helps

    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