Skip to content
Submitted over 1 year ago

Responsive Score Layout using html and css

Sebastian Badillo•10
@SebastianBadillo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The main difficulty is making the layout, as it is supposed to go.

I am not very sure about my grid and flex syntax, and cod efficiency.

how can I simplify my code?

Community feedback

  • Mohammad Shohan•40
    @CephalonShohanPosted over 1 year ago

    Hello SEBASTIAN, very good job with your code. As a beginner, I am also learning.

    you can use the gap property in the result section rather than trying to use fr to align them and just be done with it.

    you can use flex or grid to align the items of the summary section. otherwise, on the large screen, the items in the summary section are a bit off-center. these are my only two suggestions. also, you can set a max width to the result and summary or their parents so that it doesn't grow very much. Everything looks nice. good job.

    Marked as helpful
    0
    Sebastian Badillo•10
    @SebastianBadilloPosted over 1 year ago

    @CephalonShohan thanks for your feedback, I am going to try it. :)

    1

Please log in to post a comment

Log in with GitHub

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