Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502

Submitted

Result-summary-components

@BigNet90

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback will be appreciated.

Community feedback

@ratul0407

Posted

@BigNet90 congratulations on completing this challenge, You've done a great job🎉🎉

But I think you might consider some changes :

  • You don't need to give the container a specific width like, you have set 100em remove it from the container and by doing this you are depending on the content of your container to set the width. So the width will be set according to the box-1 and box-2. And it looks so much similar to the design
  • But you need to center the container on your page and to do that just set
body {
min-height: 100vh;
display: grid;
place-content: center;
}

and it will center the entire result summary at the center of the page

  • you are getting some side scrolling issues to solve that in your body tag just set overflow : hidden
  • And the box shadow is too dark try some light colors on the box shadow instead of gray and even maybe change the values a little bit and you are all set to go

I hope it seemed helpful to you🙂🙂

Happy coding my friend👍🎉🎉

Marked as helpful

0

@BigNet90

Posted

@ratul0407 thanks I really appreciate I hope we can link up so I can learn more from you

1

Please log in to post a comment

Log in with GitHub
Discord logo

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