Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results Summary with Vanilla HTML/CSS/JS

@maliabadziukh

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

Posted

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

@maliabadziukh

Posted

@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
Discord logo

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