Skip to content
Submitted over 1 year ago

Product-preview-card

Manuel Torres•20
@squirtleturtle02
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

I honestly had a ton of trouble with the mobile view. It feels like sometimes the image gets cut out of the container, and since it gets cut out, it wont have the rounded borders at the top.

Community feedback

  • Sandipan Mukherjee•180
    @SandipanIOPosted over 1 year ago

    For the images, I think you should use the picture tag.

    <picture>
<source media="(min-width: 650px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-mobile.jpg" alt="">
</picture>

    The picture tag will now take care of the screen size/resolution. When the screen is 650px or more, the desktop version of the image will be used. When the screen size is less than 650px, the mobile version will be used. And all this will happen using pure HTML, without any CSS.

    One more thing - Instead of using "width: 90vw", you can use min-height: 90vh for your container. Using 90vw is breaking your site in mobiles.

    I hope this helps :)

    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