@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
You are missing the
media
attribute for thesource
element. Themedia
attribute allows you to specify the type of media for which the resource is intended, for example, a specific screen width.In this case, you have used mobile first and it is necessary to change the image when the minimum width of the viewport is 600 pixels, so you would add the following
media
attribute to the source element:<picture> <source srcset="image-product-desktop.jpg" media="(min-width: 600px)"> <img src="images/image-product-mobile.jpg" alt="{add an alt text here}"> </picture>
-
The simplest way to set the height of the body element is with
min-height: 100vh
, setting the height to 100% on both the body and html elements can cause your component to be cut off on small screens, such as a mobile phone in landscape mode.Here is an image of how it would look on a mobile device: screencapture-aa1659-github-io-product-review-card
I hope you find it useful! 😄
Happy coding!