Design comparison
Solution retrospective
Probably could have been more accurate with the spacing of different elements. I should have come up with a system that easier to update at different sizes.
What challenges did you encounter, and how did you overcome them?Spacing.
Community feedback
- @WB52Posted 20 days ago
Your solution looks good and works over various screen sizes. I noticed you left the hero images fully inside the container, without going past it, so the photos look cut off as to the original design. I completed the same project and almost did the same as it was proving a pain to achieve but come across a way making the max width of the image greater than the container and then putting a minus left and right margin on them, which seemed to work... Unfortunately I still had some kind of an issue with the left image though when it came to the screenshot.
Though I prefer what you did not cutting the images off as it looks more complete to me...
There's a handy free chrome extension tool called PerfectPixel, it allows you to overlay the design files on your project and control the opacity so helps with getting the correct spacing etc. Well worth trying if you don't already know about it...
Marked as helpful0
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