Responsive Result Summary Page

Community feedback

• 

  Paweł Chudecki•860

  @SoulRvr29

  Posted about 2 years 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

  01

  Marked as helpful
• 

  Salah Shadoud•240

  @SalahShadoud

  Posted about 2 years 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

  00

  Marked as helpful