JS + HTML5 + CSS3, testing pseudoclass and display flex
Design comparison
Solution retrospective
any tip and / or suggestion I appreciate it
Community feedback
- @EmilianoGomezAPosted over 1 year ago
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@IlnaraAckermannPosted over 1 year ago@EmilianoGomezA Thanks, I hadn't thought of that solution.
0 - @0xabdulkhaliqPosted over 1 year ago
This comment was deleted over 1 year ago
1@IlnaraAckermannPosted over 1 year ago@0xAbdulKhalid I really appreciate your tips. I saw the error in the report and I'm kind of lost to fix it!
0@0xabdulkhaliqPosted over 1 year ago@IlnaraAckermann Glad you found it helpful ! π€
1
Please log in to post a comment
Log in with GitHubJoin 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