Design comparison
Solution retrospective
Dear All,
Here is my next challenge which was probably my fastest one ever AND my very first mobile first approach which, I must admit, was an excellent idea as it made the project much easier to be responsive! Any suggestions maybe?
Cheers to you all,
Dalma
Community feedback
- @matiasluduena23Posted 11 months ago
Hi Dalma! Nice Work Just one good practice that might help you with future projects.
- Use the picture tag to make your images responsive. Here documentation
Something like this:
<picture> <source srcset="images/image-header-desktop.jpg" media="(min-width: 700px)" /> <img src="images/image-header-mobile.jpg" alt="my-image" /> </picture>
Where the browser choose the image depending of the viewport width of the device setting in the media query in the source.
Hope this help you!
Good code!
Matias
Marked as helpful0@bdal90Posted 11 months agoHi Matias,
Wow, thanks! This is very useful! Thank you for sharing it with me.
Best wishes,
Dalma
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