Responsive Results Summary using HTML, CSS and JavaScript

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 3 months ago

  Hi there, you've done a great job on this one. Congratulations on successfully completing this project! 🎉

  I wanted to share some of my suggestions regarding your solution that might help you improve it. I visited your live site solution and you've done good work of getting it close to the design. However, I noticed that the layout was not working properly as the content was overflowing between the columns.

  • I think it must be caused by the flex layout. Instead of the max-width: 600px, use a rem value to set the maximum width of the container. I also added flex: 1 to make the two child elements equally sized.

  .card {
  max-width: 45rem;
  }
  
  .card > * {
  flex: 1;
  }
  

  This did fix the layout issue.

  • Instead of using position: absolute on the .card, you can use a display: flex on the main element and center it vertically and horizontally.

  main {
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  • Make sure the page contains an h1. Then the order of the heading levels should decrease by one.
  • The gap between the overall and the total score does seem to be overly spaced. I did try tweaking it using the Developer Tools and I think using px is a bad idea. Use rem for the height, and width. Replace the padding-top with just padding.

  I hope you found these helpful and you will be able to make use of these to improve your next project! 😄

  Marked as helpful

  0

  ---

  

  Chimi Rinzin•890

  @ChimiRinzin-HWRPosted 3 months ago

  @Code-Beaker Yes, I noticed the problems when I visited my live site and I was too lazy and confused to try to make any changes. Thank you very much for the help.

  1

  

  Tharun Raj•1,330

  @Code-BeakerPosted 3 months ago

  @ChimiRinzin-HWR You're welcome 😄

  1