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
Not Found

Submitted

Results summary component

@KeoLamola

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


Any form of feedback is highly appreciated. Thank you in advance

Community feedback

@SoulRvr29

Posted

You can center your .container in a better way. Add to body:

body{
min-height: 100vh;
display: grid;
place-content: center;
}

or if you want to use flexbox:

body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

Then you can remove in .container margin: 95px 400px and position: fixed. Also remove the properties in .attribute, you don't need them.

Avoid setting elements to a fixed height. The width is better to be set with max-width. Good luck, and happy coding!

Marked as helpful

1

@KeoLamola

Posted

@SoulRvr29 I really appreciate your feedback and time you took to give me advice. Thanks, will make changes to the code.

0

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