results-summary-component using vanilla CSS

Solution retrospective
I am proud of that I have learned new things like grouping elements using group-data-... attribute
What challenges did you encounter, and how did you overcome them?CSS is always complex by aligning items
What specific areas of your project would you like help with?border top-right radius does not work, I would be grateful if anyone knows how to fix it
Please log in to post a comment
Log in with GitHubCommunity feedback
- @thisisharsh7
🌟 Great Job!
✅ What You Did Well:
- Excellent use of CSS custom properties for theming!
- Great adoption of a mobile-first approach — keeps layout adaptive and future-proof.
- Clean and structured use of utility classes like
.grid-flow
and.flex-group
.
🛠 Suggestion:
- The
border-top-right-radius
not working is likely because the.result
div is sharingoverflow: hidden
from.result-summary
. Try movingoverflow: hidden
directly to the.result
and giving each corner its own radius where needed. - Consider moving
.continue-button
outside the.grid-flow
to better separate interactive elements from content groups.
This is a strong submission. Keep going, and try exploring CSS Grid more for advanced layouts.
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