Skip to content
Submitted over 1 year ago

Results Summary Component

Myro Joy Lee•120
@myrojoylee
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 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 :).

Community feedback

  • Bilal Türkmen•340
    @bilalturkmenPosted over 1 year ago

    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
    0
    Myro Joy Lee•120
    @myrojoyleePosted over 1 year ago

    @bilalturkmen THANK YOU!!! it worked :D

    1

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