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

flex, padding, margin

Rozan-A 240

@Rozan-A

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


ill be glad to hear your feedback ^^

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ To properly center the container.

  • Remove margins, paddings and min-height:500px from body as this will not dynamically center the card.

  • USING FLEXBOX

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
  • USING GRID
body{
min-height: 100vh;
display: grid;
place-items: center;
}

➨ Use Semantics for the proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up .attribution div inside footer.
</body>

I hope you find this helpful.

Happy coding😄

Marked as helpful

0

Rozan-A 240

@Rozan-A

Posted

@NehalSahu8055 thanks for your feedback same for you ^^

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