Order Summary with React

Community feedback

• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="root"> instead of <div class="root">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on. Hence you should change your first p to a h1.
  • You can use flexbox to center your root both vertically and horizontally.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  I would recommend that you remove all the margin from the .main-container class so that you do not use it for centering, rather if you want to center your card you can do it from the body by adding the following attributes:

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

  This way it will always be centered regardless of the size of the screen height.

  To the box-shadown you could change it to box-shadow: 2px 2px 8px #7280a740 what I did is to add two more characters to give it a gradient and a more subdued shadow.

  For an accessibility issue change the div with id="root" to a main tag and the Order Summary change its p tag to an h1, since every page should always have a main and an h1 inside the body, the first one covering all the main content of the page and the second one a unique title per page.

  Marked as helpful

  0