Design comparison
SolutionDesign
Solution retrospective
- overriding styles because of less, I think nesting added specificity and it made it hard for me to style, nonetheless, It was fun using less and will learn more about it :)
- about the media queries, my stylesheet looks like a mess
- is using less okay for today standards and can i improve or use nesting in a much better way? I'm a boot camper trying out lots of new things.
Community feedback
- @ahmedafsaPosted 11 months ago
Hello @Taannn, Good job!
It is better to use the
<picture>element with<source>tags and media queries to make the product image responsive instead of the two<img>elements- HTML:
<picture> <source srcset="images/image-product-mobile.jpg" media="(max-width: 600px)" /> <source srcset="images/image-product-desktop.jpg" media="(min-width: 601px)" /> <img src="images/image-product-desktop.jpg"/> </picture>- CSS:
@media (max-width: 600px) { .your-grid-container { grid-template-columns: 1fr; } }Marked as helpful1@TaannnPosted 11 months ago@ahmedafsa Thanks!! I was troubled on how I can use 2 images for both layout so this is a very nice suggestion, will try this out immediately! (update: it works, thanks @admedafsa)
0
Please log in to post a comment
Log in with GitHub
Join 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