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 Preview Component | ReactJS | CSS | Netlify

@NikNT

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


Hi everyone!

I am open to any suggestions and recommendations which can help to improve the overall code structure and the final output.

Thanks!

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. Just a few tips

  • Change the breakpoint to 735px, the breakpoint is 393px this will result in overflow on smaller screens.

  • If you change the breakpoint to 735px, you have to change the rules inside the <picture> element.

<picture>
    <source media="(min-width: 900px)" srcset="/assets/image-product-desktop-46292547.jpg">
    <source media="(max-width: 735px)" srcset="/assets/image-product-mobile-1140e112.jpg">
    <img src="/assets/image-product-desktop-46292547.jpg" alt="Product Image" class="picture">
</picture>

You forgot to add de border radius for small screen

Marked as helpful

1

@NikNT

Posted

@hitmorecode

I appreciate your feedback and I will improve the mentioned points in my code.

Thanks!

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