Results summary component using HTML and CSS

Community feedback

• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  ➨ Remove commented lines from the below code of your design as this is not good way to center the card.

  card {
  /* position: relative; */
  /* top: 200px; */
  /* margin: 0 auto; */
  }
  
  

  ➨ To properly center the container.

  • USING FLEXBOX

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  • Use cursor:pointer for buttons for more user friendly.

  I hope you find this helpful.

  Happy coding😄

  Marked as helpful

  0
• 

  supakorn klampod•220

  @BKvipPosted 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.

  • responsive moniter by code

  @media only screen and (max-width: 600px) { #card{ flex-direction: column; } }

  link: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  I hope you find this helpful
  Happy coding!

  0

  ---

  

  Thomas Avelli•360

  @OversrPosted over 1 year ago

  Thank you for the feedback, it’s greatly appreciated. @BKvip

  0