Skip to content
Submitted almost 2 years ago

Responsive

accessibility
Elizabeth Sotomayor•230
@elizabethrsotomayor
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I hope this passes the FEM report! One thing I wasn't super sure about was making the body itself a flex container. I made the .card a grid layout on desktop but initially wanted it to be a flex container as well. One weird thing that happened was with the scores: the .item class was set to flex and I made the score itself align-self to end, but I had some leftover space so made the score text-align right which seemed to fix the issue. Thanks for looking!

Code

Please log in to post a comment

Log in

Community feedback

  • Wendy•2,150
    @wendyhamel

    Hi, nice work on the mobile styling of this challange!

    The responsiveness could use some more of your attention though. If you get to the in between sizes the layout breaks.

    To explain your problem with the .item and get the .item-score to align-self: flex-end the align does set the .item-score to end. It's just that it pushes it down when the flex direction is row (this is default) and not to the right.

    The text-align: end fixed your problem on it's own.

    Happy coding!

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