Submitted 5 months ago

Responsive product page using media queries and JavaScript

sass/scss

Charles7458•80

@Charles7458

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

I'm proud of the JavaScript I wrote for this webpage.

if(window.innerWidth<=430) {
    document.getElementById("img").src="mobile.jpg";
}

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

I didn't know how to change the image according to screen width. I used JavaScript to do it.

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

Any suggestions are welcome. :)

Code

Please log in to post a comment

Community feedback

Yaroslav Sventsitskiy•160
@yarsvent
Posted 5 months ago
Good work, it looks the same to me!

Some suggestions:
- Use rem instead of px. There are many reasons to do this, including accessibility and responsiveness of the website
- To change the image depending on screen width, you can use the picture element with a media attribute on its source elements. Like this:
```
<picture>
  <source srcset="images/image-product-desktop.jpg" media="(min-width: 40rem)">
  <img src="images/image-product-mobile.jpg" alt="A picture of 
  the perfume.">
 </picture>
```
You can read more about responsive images here and about using <picture> for responsive pages here

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