Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Finally completed this challenge in 4days after learning about media queries and responsive layouts.
What challenges did you encounter, and how did you overcome them?Writing media query was very challenging, as sometimes it worked for mobile and didn't work for desktop.
What specific areas of your project would you like help with?please feel free to give feedback that will further improve code.
Community feedback
- @MahmoodHashemPosted 4 months ago
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- You can use the
<picture>tag when you have different versions of the same image . Using the<picture>tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here. Example:
<picture> <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}"> </picture>Explain:
- The
<picture>element is used to define a container for multiple sources of an image and its <source> elements specify different images for different media conditions. In this case, if the maximum width of the screen is 460 pixels, the image "image-product-mobile.jpg" will be displayed. Otherwise, the image "image-product-desktop.jpg" will be displayed.
Hope that's helpful!
Keep up the great work!
0 - You can use the
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