Stats preview card component solution

Community feedback

• 

  HashimAlSadah•860

  @HashimAlSadahPosted over 2 years ago

  Hi @Priyanshii677, congrats on completing this challenge. Your code looks simple and easy to read which is great, but I have few tips that can up your game.

  1-Try to use (em) unit for padding and margin instead of pixels, so you can have easy and responsive layout.

  2- line-height does not have unit. it should be for example line-height: 1. where 1 refers to the space that one line occupies within the container.

  3-For the border radius, you do not have to specify a value for each corner, you could user one for the main container and if the edges overflow the container, you set overflow: hidden for the main container.

  4-To make sure that your main container does not grow infinity as the size of the window increases, set max-width to certain value. for example , max-width: 800px.

  I have looked at you code and made some changes and comments to it. you can find it in the following codePen.

  Also I recommend the free course (responsive layouts by Kevin Powell). I think it will help you a lot

  Anyway, you did good job with this challenge and Keep Coding.

  Marked as helpful

  1

  ---

  

  Priyanshi Somani•100

  @Priyanshii677Posted over 2 years ago

  @HashimAlSadah Hey Thank you so much for your valuable feedback. Can we keep in touch, so that you can review my solutions in future as well. I keep getting very silly doubts while coding, that would be great if we can have discussion on some topics which will be a good learning for both of us.

  Thank you!!

  0
• 

  Karishma Garg•1,010

  @karishma-devPosted over 2 years ago

  Hi, Your solution looks good. A suggestion: To properly center the card you can use something like this: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh;} . In this, justify-content will align the content to the center of the main axis and align-items will align the content to the center of the cross-axis (perpendicular to the main axis).

  Marked as helpful

  1

  ---

  

  Priyanshi Somani•100

  @Priyanshii677Posted over 2 years ago

  @krrish105 Thanks for the suggestion. That was really helpful

  0