Skip to content
Submitted over 1 year ago

Results/Summary solve using CSS and HTML

jp-lavratti•40
@jp-lavratti
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    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•40
    @jp-lavrattiPosted over 1 year ago

    @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

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