Design comparison
Solution retrospective
I am proud I finally completed this challenge completing this challenge. It had me for days.
What challenges did you encounter, and how did you overcome them?I found it difficult to display either the desktop image or mobile image based on the viewport width. I initially used state and the useEffect hook in next js but it didn't entirely solve the problem. I also tried the css ::after pseudoclass and that also brought about new issues. I later found out about the html picture element which was just suitable to solve this.
What specific areas of your project would you like help with?I will learn more about how the html picture element is used and best practices.
Community feedback
- @Mary2021Posted 5 months ago
Nicely accompliced solution, Eugene! I like the clean and simple structure of your Sass code.
Found couple of good sites explaining html picture element:
- Better responsive images with picture element
- How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images
I find especially handy, that its possible to add different images for instance tablet(landscape/1200px) and desktop(portrait/1200px).
<picture> <source media="(orientation: landscape)" ... /> <source media="(orientation: landscape) and (min-width: 1200px)" ... /> </picture>
I fond a little bug in your solution. In mobile view content is longer than class main (home.module.scss) height. It resolved when removing the height property.
.main { height: 100vh; ... }
Marked as helpful1
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