Responsive page usign Mobile First design and display flex
Design comparison
Solution retrospective
Could you please give me tips on how to optimize image sizes with media? I believe I am making a mistake in executing these dimensions.
Community feedback
- @HamzaouladevPosted over 1 year ago
hello @iago-monteirog, heres some suggestions regarding your layout:
-in terms of width you can make your components fully responsive using only two lines of code and no media queries, you can use the following hack:
.container { width: 90%; max-width: 600px; }
-the image in the header should have the
width: 100%;
also hereobject-fit: cover;
is a good use case.-i invite you to read up on the
<picture>
element as this is a good use case for it instead of the image tag, heres a helpful article: The picture elementi hope you found my suggestions helpful!
Marked as helpful0 - @kennylun123Posted over 1 year ago
Hi Iago, you can try <picture> tag in HTML which can load different image url in different resolution.
This is my case,
<picture> <source media="(min-width: 40em)" srcset="images/image-product-desktop.jpg"> <img src="images/image-product-mobile.jpg" alt="Perfume_image"/> </picture>
Marked as helpful0
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