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

Mobile-first solution

Justin 60

@logJustin

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


Takeaways

To be truthful, sizing and spacing elements to mirror the solution screenshot took a lot of time and play. Using bootstrap was great, but I couldn't use a bootstrap only solution. I needed to add a lot of CSS that adjusted font sizes, container widths, and flexbox settings depending on the media screen width.

Revision Requests

This upload is around 95% there, but that extra 5% is spacing within each section. I couldn't perfect it, and let the majority of my time be consumed by that nagging imperfection.

Community feedback

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