Submitted over 1 year ago

Results Summary Component using HTML/CSS

@jclegg31

A solution to the Results summary component challenge

Solution retrospective

I think the one thing I struggled with on this one was in the mobile version, if you open the window up or down (vertical), the bars in the summary section collapse and/or the gap gets wider. Is there a way to make it so it sticks to the same height or do I want it to be flexible like this?

Any thoughts on best practices, I'm all for wanting to improve!

Thanks!

Code

Please log in to post a comment

Community feedback

Mateus Belício•710
@mateusbelicio
Posted over 1 year ago
Hi, Julie! Congratulations on completing the challenge, it was really good! 👏🏻

Answering your question...

To prevent the bars in the summary section from collapsing on small screens, simply add the white-space: nowrap; property to the black-text class.
```
.black-text {
   white-space: nowrap;
}
```
And to prevent the content from causing overflow, set a minimum width for the summary section, this way the summary-score will not break.
```
.summary {
   min-width: 16rem;
}
```
Another detail that I noticed is that the gap between scores is very small on small screens and is almost unnoticeable. I recommend adding the gap property to the summary-scores flex container, this way it will create a space between all flex items.
```
.summary-scores {
   gap: 1rem;
}
```
Congratulations once again, great job! 😁
Marked as helpful

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