Submitted almost 2 years ago
CSS Flex, CSS variables, Media queries, Responsive Web Development
@cindykandie
Design comparison
SolutionDesign
Solution retrospective
N/A
Community feedback
- @davislocsPosted almost 2 years ago
Hi Cindy! your project looks great, but i have one suggestion for you:
- Use <picture> tag insted of <section> for wraping all of your pictures.
Insted of this:
<section> <img src="images/image-product-desktop.jpg" class="product-image" alt="Perfume image Gabrielle channel"> </section>
Do this:
<picture> <source media="(max-width:800px)" srcset="images/image-product-mobile.jpg"> <img src="images/image-product-desktop.jpg" class="product-image" alt="Perfume image Gabrielle channel"> </picture>
This will help you with changeing pictures from desktop to mobile version. Instead of having one image that is scaled up or down based on the viewport width, you can use multiple images.
If you found this helpful please mark it as such :)
Marked as helpful1 - @cindykandiePosted over 1 year ago
Thank you so much for this, I went down the tunnel of such semantics and I learnt a lot, highly appreciate
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