Design comparison
Solution retrospective
1) Mobile design width
I struggled with the mobile design width. I noticed that the design with a width of 375 pixels does not display properly on my Xiaomi Mi 9T phone. I found that using a media query with a width of 425 pixels provides better compatibility for the mobile design. However, do you have any other suggestions for a different solution?
2) "image-area" section and hiding images
I have some concerns with the "image-area" section. I used the "display: none" style to hide the image in the mobile view. However, this solution may have limitations in terms of content accessibility. Is there a better alternative? Do you have any other suggestions for organizing the content in a better way?
Community feedback
- @anmolthedeveloperPosted over 1 year ago
Hello, Congratulations on completing this challenge
The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <source media="(min-width: 769px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>Here's a detailed reference: here
Marked as helpful1@mFatihGorhanPosted over 1 year ago@anmolthedeveloper Thank you very much, I learned something new thanks to you.
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