How can I add an appropriate media query for the mobile version? I'm unsure about my code for the different image application. Please give feedback on how I can improve.
<picture>
<source media="(max-width:768px )" srcset="images/image-product-desktop.jpg">
<source media="(min-width:375px )" srcset="images/image-product-mobile.jpg">
<img src="images/image-product-desktop.jpg" alt="Perfume">
Hello, congratulations on completing the challenge! Let's have a look at what you can improve next time:
It's a good practice to make the mobile design first and then add a media query for the desktop version.
In the picture tag, you just need one breakpoint to indicate when the design will go from mobile to desktop. Use min-width, now max. In other words, it would look like this:
<source media="(min-width:768px )" srcset="images/image-product-desktop.jpg"> <img src="images/image-product-mobile.jpg" alt="Perfume">
@media only screen and (min-width:768px)
(Here is a tutorial on media queries)
However, it's a better idea to use em or rem instead of pixels, what takes us to the next point:
Don't use pixels or other absolute units for dimensions, it doesn't make your page responsive. You should be using mostly em or rem. You can read about CSS units here.
To make the image responsive, don't add height and width. Instead, give it max-width: 100% and object-fit: contain .
Double-check the font sizes and line height of the text. The bigger heading looks noticeably smaller than the design's, and the paragraph's lines look too close to each other.
You're missing the active state for the button. You're going to need cursor: pointer and the :hover pseudo-class with the darker background color.
I hope this helps, and keep it up!
