Design comparison
Solution retrospective
Some Struggles
- Started building the project without looking at the screen-size. After building for awhile, I realized that it broke during the smaller screens and had to go fix it. Next time, I want to start off from the smallest version
- Had difficulty with
max-width
andmin-width
- Overlapping the summary component underneath the results component was difficult. I ended up using negative margins, but felt like this is not an elegant way to solve the problem
Community feedback
- @dserranoiPosted over 1 year ago
For the overlapping issue, you really don't need to overlap them, they look overlapped in the design but really you can approach the solution in a way where you have a parent container let's say a DIV and inside it you have 2 children divs. You can apply flex display to the parent div, and in the div that wraps Your Result apply the border radius property as well to the parent Div.
I am sure that should help to accomplish that piece..
Marked as helpful0@oo2smhPosted over 1 year ago@dserranoi That makes a lot more sense than what I did. Thank you for sharing. That is a much better solution than what I did lol. I appreciate it! 🙏
1
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