@clinto-bean
Posted
Great work on making this responsive! One thing you may want to consider with the media queries, while shrinking down to a large phone/small tablet size I noticed that the summary rows became larger vertically because they were forced to wrap around the scores.
One thing which you may benefit from is to create a wrapping div around the scores to have the parent element see it as just one item rather than three. Something like this would probably be an easy implementation.
<div class='category visual-category">
<svg ...></svg>
<div class="score-wrapper">
<p class="category-label"> Visual</p>
<p class="score"><span>72</span> / 100</p>
</div>
</div>
Note the removal of the h4 element as well. With semantic HTML, we want to avoid reusing specific heading levels for the purpose of screen readers, and instead use CSS styling to take care of it. You can easily apply your styling to all of the score categories and scores themselves with the following CSS.
.category-label {
font-size: 1.25rem;
font-weight: 700;
}
.score span {
font-weight: 700; /* Alternatively you can choose to use font-weight: bold. */
}
Hopefully you find my feedback helpful. This was the first challenge I took on and I definitely had my head wrapped around it for a while. You did a great job and I hope to see you continue working on these challenges.
