Skip to content
Submitted 20 days ago

Responsive Product Preview Card using Sass

#sass/scss
P
Kumani Kidd•150
@amancalledkidd
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

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?

Community feedback

  • Grego•1,430
    @Grego14Posted 20 days ago

    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
    0
    P
    Kumani Kidd•150
    @amancalledkiddPosted 20 days ago

    @Grego14 Very helpful thank you very much! I will update these now 😊

    1

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