Skip to content
Submitted about 1 year ago

Product Preview Component | ReactJS | CSS | Netlify

Nikhil Tanwar•260
@NikNT
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

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,680
    @hitmorecodePosted about 1 year ago

    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
    Nikhil Tanwar•260
    @NikNTPosted about 1 year ago

    @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

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