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

JS + HTML5 + CSS3, testing pseudoclass and display flex

IlnaraAckermannβ€’ 50

@IlnaraAckermann

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


any tip and / or suggestion I appreciate it

Community feedback

EmilianoGomezAβ€’ 30

@EmilianoGomezA

Posted

Hi!, to get all the elements centered in the Summary section, can be better to add two internal divisions into <li> to fit better all elements, the first with the img and title of the section and the other with the score. Example:

<li> <div> <img src="..." alt="..."> <p>Reaction</p> </div> <div> <p><span>80</span> / 100</p> </div> </li>

That change could help you to add display flex to the <li> and with that you can fit those elements with justify-content: space-between and align-items: center; this recomendation is because I see that the images in Summary section are misaligned in relation to the other content, generating them by using "list-style-image" in CSS can be a problem, it's better to put them into the HTML.

I hope this can help you, have a nice day!

1

IlnaraAckermannβ€’ 50

@IlnaraAckermann

Posted

@EmilianoGomezA Thanks, I hadn't thought of that solution.

0
Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

This comment was deleted

1

IlnaraAckermannβ€’ 50

@IlnaraAckermann

Posted

@0xAbdulKhalid I really appreciate your tips. I saw the error in the report and I'm kind of lost to fix it!

0
Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

@IlnaraAckermann Glad you found it helpful ! 🀠

1

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