Skip to content
Submitted over 1 year ago

Responsive product-preview-card-component using Flexbox.

London Joseph•140
@London-Joe
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

The switching between the different viewports while maintaining the structure of the design was a bit tricky for me, but I managed to solve that issue even though I don't think the method I used was the best practice.

Community feedback

  • Vivek•150
    @tweetandcodePosted over 1 year ago

    Hey saw your solution, looks great.

    One suggestion, instead of <img> tag, try <picture> tag, this will load only one of the two images(depending on if it is a mobile or desktop).

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.

    Hope this helps.

    Marked as helpful
    1

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