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

Product Review Component Card

P

@Hekimianz

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Hoaxilog 130

@Hoaxilog

Posted

Hi we do the same solution for the image part wherein we set it to display: none and trying to display: block using media queries to show the image. but someone gave a feedback that it was better to use a <picture> tag for that scenarios.

You can follow this link and see the explanation on why is it better:

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
  • https://www.frontendmentor.io/solutions/product-card-solution-3OjGsmsV3z

thanks for letting me know by https://www.frontendmentor.io/profile/danielmrz-dev

Marked as helpful

1

P

@Hekimianz

Posted

Oh thanks! That looks way better. Will definitely implement that! Thanks for the advice @Hoaxilog

0

@percydocomo

Posted

The layout looks good on different screen sizes and yet the code is concise and simple.

1

P

@Hekimianz

Posted

Thanks! @percydocomo

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