Skip to content
Submitted over 2 years ago

Results Summary Component

Myro Joy Lee•120
@myrojoylee
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had problems recreating those partial borders around the Memory/Verbal/Visual/Reaction. I'd never done before, only full borders, so I skipped that part in my CSS. All the solutions I found on Stack Overflow or elsewhere were pretty intermediate/advanced for me and I just couldn't understand them lol. But here is my attempt at the rest of it minus the partial borders...found a codepen to center the entire thing upon window resize and credit is given within. Feedback welcome :).

Code

Please log in to post a comment

Log in

Community feedback

  • Bilal Türkmen•340
    @bilalturkmen

    Hi, nice work. i think it can be improved a bit 😊

    no need to use js to center an element.

    ✅css grid or flexbox is enough for this. to center an element over the viewport area you should add min-height property to body selector like this

    body{
min-height: 100vh;
    display: grid;
    font-family: "Hanken Grotesk", sans-serif;
    text-align: center;
    place-content: center;
}

    and then you can delete the index.js. you dont need that anymore. you can also delete this div

    • your media query breakpoint stays small for the width of the card design. should be expanded a little more like this
    @media screen and (min-width: 768px) {
}

    ✅ can be replaced as main because document should have one main landmark.

    • same this div

    ✅ can be replaced as h1 because page should contain a level-one heading

    i hope these helpful 🙂

    Marked as helpful

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