Submitted 9 months ago

Result Summary Component with responsive using pure CSS (mobile first)

Nattawat Pitikomon• 20

@DepartureLV

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

The circle with the score (which is not at the center of the circle) is hard to deal with. I found that using var to fix the height and width of the circle is not a good approach since I can't know the final height of the score text. If I increase the font size, the circle may turn out to be oval because the text cannot fit in the var height, resulting in stretching the circle in a vertical direction.

If you know the best practice for this case, please let me know.

Thank you in advance 😊

Community feedback

MaximilianoDanielGarcia• 2,000

@MaximilianoDanielGarcia

Posted 9 months ago

Hi Nattawat, good job!

In response to your question, You should remove padding and gap properties from your .score-container. And if you want to create a perfect circle you can do it using aspect-ratio: 1/1;

Pro tip: There exists a browser extension called Perfect Pixel that allow you overlay and compare with the design image.

I hope these was helpful to you. Happy new year!

Marked as helpful

Nattawat Pitikomon• 20

@DepartureLV

Posted 9 months ago

@MaximilianoDanielGarcia Thank you, Happy New Year to you too 🎉

Please log in to post a comment

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