Used Flex-box.

Community feedback

• 

  Rajesh Janyani•330

  @Rajesh7rjPosted over 1 year ago

  Hello @amar215, Congratulation for your first chellange.

  I have seen your code, one thing I want to tell you is the width and height of card are not appropriate. You should give width in rem (around 18 rem to 20rem). because giving width in % it will change according to screen size because it's depend on screen size. also for heigth you should give 100% height or don't giving height it by default takes space that requires for contain of card with padding. So if you add just width : 18rem and height:100%. It will make your component accurate and responsive also.

  .card { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 5rem auto; padding: 20px; width: 18rem; <==== height: 100%; <==== background-color: hsl(0, 0%, 100%); border-radius: 15px; }

  I hope it will solve your problem, keep coding and keep learning.

  Best Wishes

  Rajesh Janyani

  }

  0

  ---

  

  Amar Kosare•170

  @amar215Posted over 1 year ago

  @Rajesh7rj Thank you very much for your constructive feedback! I will take action on your tips and advice. Thank you for pointing out about '%' I had almost forgotten that. Have a great day ahead!

  0