Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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

Responsive Results Summary Component

@Gerald-LeCour

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

madosy 180

@madosy

Posted

Hey looks great! I noticed that it doesn't fit right on mobile. When you added padding-left: 30px to div.summary-content, it added to the total width, causing it to be 405px and generates a scrollbar and empty space to the right.

I would change the div.summary-content {box-sizing: border-box;} so that your width won't change even if you add padding, and get rid of padding-right on your .summary-content ul.

I would also get rid of margin-right on your .list-scores and just add padding-right on your div.summary-content so you don't have to look at different areas for controlling the padding.

Marked as helpful

0

0sereme 370

@Dev-simeon-tech

Posted

@madosy thanks for the advice really appreciate

0

@Gerald-LeCour

Posted

@madosy Hey, Thanks so much! I didnt even notice that, I'm going to do that right now!

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