Skip to content
Submitted about 1 year ago

Results Summary with Vanilla HTML/CSS/JS

Malia Badziukh•20
@maliabadziukh
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 tried to keep the CSS selectors and properties as optimized as possible, but do you have any suggestions on how I can improve it? The file is really long and I'm wondering if there is a way to optimize it further.

Community feedback

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted about 1 year ago

    Hi Malia, great job!

    It looks almost perfect. Change this in your .card class:

    .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    And It will be look perfect.

    1
    Malia Badziukh•20
    @maliabadziukhPosted about 1 year ago

    @MaximilianoDanielGarcia Thanks for your feedback! I also noticed this issue when I submitted the solution and the problem was that I used margins for the right section, so the flex 50% did not work. I switched to using padding instead and now it's 50:50 :)

    I did not want to use grid because it's a 1d layout so I stuck with flexbox.

    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