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

Stats Preview

@madkn1311

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


Any feedback is welcome.

Community feedback

@zaidansari42

Posted

Beautifully coded as always. I want to ask that have you purposely kept the font-style and letter spacing in the stats number different than the design ?

And I would suggest you to update your readme file with a live link and screenshot.

Provide a border-radius to your .container to get the same look as the one provided in design.

Marked as helpful

0

@madkn1311

Posted

@zaidansari42 Forgot to add the link, will definitely do that.

1

@EngineerHamziey

Posted

Hi Madiha Khan, you have done a great a job. here is one thing I noticed, your desktop version isn't centered , to fix that:

/* 
    inorder to center the page vertically and horizontally,
    you should use flexbox. For that you will need to add min-height 100vh to the body to ensure that it's center vertically on all devices
    min-height is the best option so that will grow bigger when needed(i.e responsive). min-height NOT HEIGHT, using ordinary height, won't 
    allow responsiveness
  */
body{
  min-height: 100vh;
  /* then we can now center it with flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Marked as helpful

0

@madkn1311

Posted

@EngineerHamziey Thank you so much, I'll fix it. :)

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