@MelvinAguilar
Posted
Hi @LovelyFaisal ๐, good job for completing this challenge, and welcome to the Frontend Mentor Community! ๐
Here are some suggestions to improve your code:
Your screenshot looks different from the design and your live version because you have not checked your solution in another browser, in the Firefox browser your design was damaged because in Firefox the height of your image is fine but the width of your image is taking the 600px that the image has in dimension
To solve it follow these steps:
- Add the property
flex: 50%;
to.img
and.info
this way you are creating two columns. More information. - Use
width: 100%;
andobject-fit: cover;
in the.img img
selector, with this the width of your image will fill the width of your column.
Result:
.img, .info {
flex: 50%;
}
.img img {
height: 100%;
width: 100%;
object-fit: cover;
. . .
}
Other suggestions:
- You can use
<picture>
tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth. More information here
Example:
<picture>
<source media="(max-width: 650px)" srcset="./images/image-product-mobile.jpg">
<img src="./images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum">
</picture>
I hope those tips will help you.
Good Job and happy coding !
Marked as helpful
@LovelyFaisal
Posted
@MelvinAguilar Thank you so much