Skip to content
Submitted about 2 years ago

Responsive Product Card Component

Andres Guevara•30
@Andresssg
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

This is my first challenge. My first time doing responsive components. Don't be rude haha.

What should I improve?

Community feedback

  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello Andres, welcome to the community and congrats on finishing the challenge!

    Your component looks pretty good and responsive, you did a pretty good job with that.

    You can use a little trick instead of adding both images as img and using display: none on screen size changes.

    You can use two <source> tags add both images (the mobile and desktop versions of the image) inside of them, then in the source tag, you can specify at what screen size the image has to be displayed, remember that this tags have to be wrapped by <picutre></picture> tags!

    Hope my feedback helped you!

    Marked as helpful
    0
  • PVI•210
    @PVIdubsPosted about 2 years ago

    Hi Andres and well done... Try to use Flexbox on the right column with justify-content: space between;.... You will get the desired gaps between each text...

    Once again, good work...

    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