Responsive Result Summary Page

Community feedback

• 

  Paweł Chudecki•840

  @SoulRvr29Posted over 1 year ago

  You can center everything in an better way. Remove margin-top: 10%; from container and add:

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

  or if you want to use flexbox:

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

  This guide helped me a lot in understanding grid: click here

  Marked as helpful

  0

  ---

  

  Pratham•10

  @PrathamS1Posted over 1 year ago

  @SoulRvr29 Thank you for the update, that really helped with the solution.

  0
• 

  Salah Shadoud•240

  @SalahShadoudPosted over 1 year ago

  Hey There! Congrats on Finishing the Challenge. i have a few notes for you and may this help you in your future challenges and projects:

  • You missed the summary resutls background colors, you can achive that by using the values they gave in the style-guide file in the hsla(Hue, Saturation, Lightness, Alpha) function, this way u can benefit from the alpha value that is responsible for the transperancy of the color.
  • Grid Property is a time saver property especially when it comes to ressponsive desings, so i recommend you to learn using it and start applaying it in your challenges, and here is a good video that will help u learn it in the easy way, Link Here
  • i recommend to follow the Mobile-first approach and it works by starting your work from small screens and gradually working up to larger screen sizes.

  hope this will be helpful, Happy Coding

  Marked as helpful

  0