Responsive results summary component using Flexbox
Design comparison
Solution retrospective
This challenge was a bit tough to crack fast. I struggle a bit with responsive design and often find myself writing CSS too fast instead of carefully thinking about the relationships between parents and children.
I didn't quite get everything right. There are some spacing issues that were a bit improvised, and I also found it challenging to get the gradient transition of the result circle just right.
I imagine there's way more CSS than necessary in there, but if anyone would be willing to go through it and give me some feedback, that'd be much appreciated.
Thanks!
Community feedback
- @gfunk77Posted 11 months ago
Hi, congratulations on your solution. I think it looks great, particularly the desktop design. I would suggest:
- Consider avoiding fixed width/height on container elements. Allow the content inside to dictate the dimensions and if you want to cap the size at a certain pixel use max-width. This will help with responsiveness.
- Place box-sizing with your * { }.
- On the brief, the mobile design result container is the full width of the screen (purple part). You have your outer container set to 375px. That is making large margins on left and right on the mobile and there is a gray border all around.
- You have position: relative on your .result but no specified position for the children, so you can remove that. -You have font-size: 15px in multiple places. You can set your font-size in the body and then just adjust in the specific places where it is needed.
I hope some of these comments help. Your solution looks excellent. Very well done.
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