Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Card Component

@Andresssg

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@DavidMorgade

Posted

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

@PVIdubs

Posted

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
Discord logo

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