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

Responsive results-summary-component

Walid-Gs 220

@Walid-Gs

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


  • desktop first.

  • Flexbox.

  • Media queries.

  • please provide feedback and help me improve 😀.

Community feedback

Pavel B. 270

@Jagholin

Posted

Great job! I only looked in DevTools, but havent found much to complain about.

What can be improved:

  • It's just my personal preference, but in many cases you dont need display: flex; flex-direction: column, the default flow layout does many things just fine. It also does margin collapsing, which can be either good or bad(depends whether you are used to it or not).

  • width: 100% does nothing for display: block elements, and might even be harmful sometimes

Marked as helpful

1

Walid-Gs 220

@Walid-Gs

Posted

  • @Jagholin , thank you so much for your feedback, i really appreciate it.

  • and yes, you are totally right block elements (display: block) takes the whole view port width by default.

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