Skip to content
Submitted over 1 year ago

Results Summary Component

Mirm•80
@Missteeme31
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 challenged myself by collecting the data from the JSON provided rather than hardcoding it. It was hard but I learned a lot. I'm also still having issues with media queries, but I'm getting better at it. All constructive feedback is appreciated!

Community feedback

  • kasey•320
    @kaseyveePosted over 1 year ago

    Based on your media query, I assume you took a mobile-first approach, which is great!

    Something I wish someone told me from the start was to use padding instead of margins where possible as it gets the job done with less code.

    Here, I would remove margin-top and margin-left from .summary and instead add just use padding: 20px;.

    For a smoother transition between mobile to desktop, .container width can be 100%.

    For .result and .summary to align nicely for desktop, you can remove the height from .result and add justify-content: space-between instead.

    Overall awesome job!

    Marked as helpful
    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