Responsive Results Summary

What are you most proud of, and what would you do differently next time?

The HTML is well-organised and uses meaningful tags (<main>, <h2>, <button>), making the code accessible and easy to maintain.

With just one media query, the layout gracefully adapts to both mobile and desktop screens. This shows a strong understanding of responsiveness.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges was replicating the original Frontend Mentor design pixel-for-pixel, especially when it came to gradients, spacing, and font weights. I inspected the design closely, used browser dev tools to tweak CSS in real-time, and relied on the screenshots to guide my adjustments.

Ensuring the layout worked well across different screen sizes — especially the transition from mobile to desktop — was tricky. I used a mobile-first approach and tested frequently using responsive design tools in the browser.

What specific areas of your project would you like help with?

I'm seeking help and feedback any part of the project but most especially on the responsiveness issues I had while doing the project:

1. Circular Score Container (.score-container) • The circle works well on desktop and mobile views, but around 650px screen width, it begins to overfolo or break layout alignment.
2. Summary Section (.summary-container) Overflow • The summary section starts to overflow outside the container or becomes squashed at mid-sized screens (especially near 650px).