Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @agelitaeme ๐, 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 with the design 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:
- Use
box-sizing: border-box;
in your*
selector. More information - Add the property
flex: 50%;
tocard__image
andcard__info
this way you are creating two columns. More information. - Use
width: 100%;
andobject-fit: cover;
in the image selector, with this the width of your image will fill the width of your column.
Result:
* { box-sizing: border-box; . . . } .card__image, card__info { flex: 50%; } .card__image img { height: 100%; width: 100%; object-fit: cover; }
Other suggestions:
- Try to fix the issues indicated by the report in this solution.
- 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: 460px)" srcset="./assets/images/image-product-mobile.jpg"> <img src="./assets/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 helpful1 - Use
Please log in to post a comment
Log in with GitHubJoin 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