Skip to content
Submitted over 1 year ago

Results Summary Component Using SASS, BEM and Flexbox

Bryan King Pecho•230
@bkpecho
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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
    @alululululuerPosted over 1 year ago

    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
    Bryan King Pecho•230
    @bkpechoPosted over 1 year ago

    @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

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