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 Component Using SASS, BEM and Flexbox

@bkpecho

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


Hello Everyone! I would love to hear your thoughts and feedback on my solution! Please feel free to leave comments or suggestions. I'm open to learning and improving my skills, and any feedback would be greatly appreciated. Thank you!

Community feedback

luking 230

@alululululuer

Posted

Hello! Here are some thoughts in my view.

  • Aviod any horizontal scrollbar. Your media query min-width should set at least 750px, because your two parts width of this component seted to 375px and your min-width seted to 700px which smaller than the card width.
  • Your BEM rules seem a little confused👀. I'm also learn BEM and I do not well too. "--"should be used as modifier. I think it maybe look better:
    .card {}
    .card__result {}
    .card__summary {}
    .summary__wrapper--reaction {}
    .summary__wrapper--memory {}
    

Just from my perspective, hope it's helpful to you.

Marked as helpful

1

@bkpecho

Posted

@alululululuer I was really having a hard time to think of class names for those! Thank you so much!

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