Design comparison
Solution retrospective
I wasn't quite sure how to get the picture the scale and position correctly in the mobile layout. My approach was to create a container for the image which I set to overflow=hidden. I then hardcoded the image dimensions in pixels and shifted it upwards using position absolute and a negative "top" property.
I suspect there's probably a better way to do this.
Community feedback
- @nelsonleonePosted almost 2 years ago
Hello , congrats on completing the challenge.🎊
Here are some tips you should consider using to improve your solution or use in another. You can use
<main>tag to wrap your content, than writing more code likerole="main"You can use a
<picture>to add the image for desktop and mobile, it will change based on screensizes, you can read more about the picture tag. The image, you can set anobject-fit:containto contain the image than setting overflow hidden, the image won't scale outside it's container.Hope it was helpful Have fun coding
Marked as helpful0@aaronrubinsteinPosted almost 2 years ago@nelsonleone Thanks Nelson! Appreciate the suggestions. I'll do some research on using the picture element.
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