What specific areas of your project would you like help with?
Circular Result Design:
I want to achieve a perfect circular design for the score display, but I'm having difficulty with consistent sizing and alignment across different screen sizes. I'm also trying to apply a smooth gradient effect that transitions between two colors (similar to the one shown in the attached image), but the colors aren't blending as expected. Sizing of Elements:
I'm struggling to decide the best sizes for the circle and the text within it so that the design is responsive and visually balanced. Any advice on setting appropriate width/height for the circle and scaling the text properly would be appreciated. Best Practices in CSS:
I want to ensure that my CSS is clean and follows best practices, particularly when it comes to Flexbox alignment and organizing my classes. If there are ways to optimize my CSS for this component, I'd appreciate suggestions on how to refactor it for readability and maintainability.
@SvitlanaSuslenkova
Posted
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
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
