Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results/Summary solve using CSS and HTML

@jp-lavratti

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I made this project with my knowledge of flex and I loved it, it left me stuck in some moments and I had to think outside my standard to solve this site.

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Great work! It looks like there is an issue on mobile view, e.g. with 500px screen width; your summary list seems to be left aligned. You can fix this easily by adding align-items:center; like so:

@media (max-width: 688px) .summary-container, .overall-container { width: auto; padding: 0; align-items: center; }

Also remove height: 500px, as it is not a good idea to have fixed heights for text containing elements. This might cause some accessibility issues. Try to avoid that.

Hope you find this feedback helpful!

Marked as helpful

0

@jp-lavratti

Posted

@visualdenniss thanks! i already fixed that left aligned items, and i will remove that height. thanks for the support!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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