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
