Skip to content
Submitted 4 months ago

Responsive Product Preview Card using Sass

sass/scss
P
Kumani Kidd•170
@amancalledkidd
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of using the picture element to responsively change the image depending on page size. This was the first time I have used it, it seems a more efficent way of dealing with responsive pages that require multiple images.

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

Next time I will give better class names to my code.

What challenges did you encounter, and how did you overcome them?

I found getting the images to fit the container to be the most difficult. Eventually I found object-fit which helped solved the issue. Will need to look more into styling images in the future

What specific areas of your project would you like help with?

Did I use the picture element correctly?

Also is the scss structure correct?

Any suggestions on improving code?

Code

Please log in to post a comment

Log in

Community feedback

  • Grego•1,430
    @Grego14

    Hello! Congratulations on completing the challenge. 🎉

    You made a correct use of the picture element and I wanted to tell you that it is not necessary to place the <source> of the image that you place as fallback because if no <source> complies with the media-query the fallback will be used.

    This example will do the same as yours:

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

    To remove the space created below the image you can use vertical-align: middle; on the <img> element.

    I suggest you use min-height: 100vh; Instead of height: 100vh; since on mobile devices the content is cut off, and it's impossible to see the full button.

    I hope this helps! 😁

    Marked as helpful

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