Design comparison
Solution retrospective
I would greatly appreciate any feedback you may have!
This challenge presented quite a few difficulties, particularly regarding positioning. Here are my specific concerns:
- I attempted to use a picture element, but unfortunately, I couldn't get it to work properly.
- To address the issue of overflow on the desktop image when resizing the browser, I created an
overflow-hiddenutility class. However, it doesn't look optimal as it clips the left side of the image. - I would appreciate some guidance on whether I positioned the box SVG correctly.
In general, I'm not entirely satisfied with how I positioned the desktop illustration. In hindsight, I believe using a max-height on the entire component and using negative margins to position everything might have been a better approach. I might consider revisiting this challenge in the future. However, before doing so, I would greatly appreciate receiving feedback on my current solution.
Thank you in advance for your insights and suggestions!
Community feedback
- @rmartin93Posted over 1 year ago
overflow-hidden is great actually! The solution is supposed to have the image clipped so I think this is perfect.
If you want to avoid that, you could use background-image instead and play around with learning that. It's a useful one to know, since background-image opens up the door to do a lot of stuff you wouldn't normally be able to do with just putting the svg directly into the div.
Kevin Powell has some good videos going over some general background-image stuff if you want to learn more.
Happy coding!
Marked as helpful1@semperprimumPosted over 1 year ago@rmartin93 I meant to say that it clips on the right, not the left😁 Thank you for your valuable feedback!
1
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