Skip to content
Submitted 7 months ago

Responsive product preview card component using sass

Noha Waheed•230
@nohawaheed
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 used sass for the first time today, I used scss before but not "sass not so found of the indentation", but though i would give it a try

What challenges did you encounter, and how did you overcome them?
  1. I found it challenging to change the image src when the screen size changes and I displayed the image through background-image property in css file
  2. The image did not taking all the space available when using background-size: contain or cover values and used 100% 100% to fix it
What specific areas of your project would you like help with?

I used background-image: url() to display the image in an :after pseudo-element in the css file to be able to change the image url to mobile image when width changes. I think the img element is supposed to be in the html file for the SEO. I thought of a way to change the img src if the img element is added in the html with using js event listener to listen to the screen width, but this challenge is using html and css Is there another way around or is it okay to use background-image: url() here?

Community feedback

  • Grego•1,310
    @Grego14Posted 7 months ago

    Hello! Congratulations on completing the challenge.

    Yes, there is another way to make the image change, and that is by using an html element called picture. You can read more by clicking on that link.

    Here is an example of use:

    <picture>
  <source srcset=""images/image-product-mobile.jpg"" media="(min-width: 23em) and (max-width: 48em)" />
  <img src=""images/image-product-desktop.jpg"" alt="" />
</picture>

    I hope this helps!

    Marked as helpful
    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