stats-preview-card-component-main

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

  ---

  body {
    justify-content-center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .container .content {
    overflow: hidden;
    margin: 2rem;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Edmiro Cacoma•230

  @Edmiro-CacomaPosted over 1 year ago

  Hello buddy @0xAbdulKhalid thank you for the tips. I made the changes you recommended.

      display: flex;
      align-items: center;
      justify-content:center;
      font-family: "Inter", sans-serif;
      flex-direction: column;
      min-height: 100vh;
      background-color: var(--main-bg);
  } ```
  

  0
• 

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  @Edmiro-Cacoma This is a well-built solution, you really put in the effort to make it excellent, Keep it up. I just hoped that this would also be helpful. To center the preview card vertically also.

  body {
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--main-bg);
    justify-content: center;  /*Add this to the body styles of the preview card*/
  }
  

  Otherwise, you really did an excellent job on this solution. Hope this is helpful to you. Happy coding!

  Marked as helpful

  1

  ---

  

  Edmiro Cacoma•230

  @Edmiro-CacomaPosted over 1 year ago

  Hello buddy @Dev-Jhex thank you for the tips, i made the tips you recommended.

      display: flex;
      align-items: center;
      justify-content:center;
      font-family: "Inter", sans-serif;
      flex-direction: column;
      min-height: 100vh;
      background-color: var(--main-bg);
  } ```
  

  0