@beowulf1958
Posted
Great job on completing this challenge! Your desktop design looks great, your css is very organized and readable, and you made good use of css variables and flexbox.
However, the mobile design needs a little tweak. The heart of this challenge is to switch the image from image-product-desktop.jpg to image-product-mobile.jpg as the screen size changes. This is an important skill, as many of the challenges require switching images with screen size. Reviewing other peoples' solutions, there are several ways of switching images. The simplest way may be using <picture> element with the "srcset" attribute. When reviewing your project, I simply removed the image and replaced it with a <picture> :
<article class="container">
<picture>
<source
media="(min-width:600px)"
srcset="/images/image-product-desktop.jpg"
/>
<img
src="/images/image-product-mobile.jpg"
alt="product-img"
class="perfumeImg"
/>
</picture>
When I did that (and removed an unnecessary max-height: 80%
from the container) it looked beautiful. A helpful article here explains how to use the picture element.
Hope this helps. And keep on coding!
Marked as helpful
@deidalopez
Posted
@beowulf1958 Thank you so much for pointing out the fact that I almost missed out on a learning lesson by not updating the image source depending on the screen size. Also thanks for the resources and your feedback!