Design comparison
Solution retrospective
What can I change to make it look better on mobile? I feel like the image is too big and needs to be adjusted. Thank you.
Community feedback
- @victoriamnxPosted over 1 year ago
Hi Luis, I saw your code and would like to give you some tips:
You use preconnect to import fonts, there is a better way to do this:
In your style.css file put @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap");
@import will get the url that google fonts generates to use in the code.
In your button the photo of the cart is misaligned, you can change your code to:
<button><img id="cart" src="images/icon-cart.svg" alt="" />Add to Cart</button>
That way the image will be correct and aligned with the button, and the fonts will be imported faster, I hope these tips help you, the result was great!
Marked as helpful0 - @valeOopaPosted over 1 year ago
Congratulations on completing the challenge, that's great!
As for the photo you could do this:
Add to .perfume
object-fit: cover; height: 100%; width: 100%;
and add in @media .perfume:
max-height:300px;
Object-Fit serves as a property to adjust your image depending on the value you pass to it. Also, we use a max-height 300px to limit the height of the image, and finally, we say that it fills 100% of the container, so that it is displayed correctly.
Happy Coding!
0
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