Stats Preview Card using HTML, CSS, Flexbox

Community feedback

• 

  Rebecca Padgett•1,860

  @bccpadgePosted about 1 year ago

  Hello @ZahidurRahman8759. Congratulations on completing this challenge!!!🎉

  I have a few suggestions you might be interested in to improve your solution.

  • On mobile devices, you want to add padding on the top and bottom on your body element.
  • I would add another media query for tablet because the stats component squishes trying to get the max-width media query or you could start mobile-first approach if want to.
  • The code on your body needs to be updated:

  body {
      background-color: hsl(233, 47%, 7%);
      height: 100vh; /* You can remove this style and add min-height instead */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;  /*Font size shouldn't be in pixels */
     padding: 5rem 0; /*Adds space on the top and bottom*/
  }
  

  • You are going to remove it on larger screen using a media query because the stats component wouldn't be in the center of the page.

  • Putting height on element is specific height does not grow at all and min-height is the minimum height of an element.

  More info📚:

  • Min-height CSS Property

  • Font size shouldn't be pixels

  Here is my solution to this challenge: Stats preview card component

  Hope this helps you and don't hesitate to reach out to me if you have an questions

  Marked as helpful

  1

  ---

  

  Zahidur Rahman•80

  @ZahidurRahman8759Posted about 1 year ago

  @bccpadge Thank you so much for the suggestions. I was thinking of finding some people who can help me fix my mistakes and point out stuff. It will help me a lot.

  0
• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  Nice well done. I just have one question. Why do you have so many media queries? You could have done this with just one media query.

  0

  ---

  

  Zahidur Rahman•80

  @ZahidurRahman8759Posted about 1 year ago

  @hitmorecode Oh it's just I personally feel easy to navigate throughout the code. Like all sections are on the top and images are on the bottom including codes in media queries. But yeah it looks messy

  0