Order summary component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in genera looks really good.

  You already got some feedbacks from others which is great, just going to add some as well:

  • You don't have to use position: absolute on this one. Try inspecting your layout, hover on the body tag, you will notice that it doesn't have any height this is because the card component is out of the flow. Instead, remove the position: absolute and on the body tag, use :

  body {
    align-items: center;  # centers vertically
    display: flex;
    justify-content: center;  # centers horizontally
    min-height: 100vh;  # takes full viewport
  }
  

  Then just remove the position, left, top, transform property on the card selector.

  • Always have a main element on a webpage. For this one, the card selector could use the main instead of div.
  • Always have an h1 element on a webpage.
  • The proceed to payment could use a tag instead of button, since this is not a form and button does not do anything in here.

  Aside from those, really great job on this one.

  Marked as helpful

  1

  ---

  

  Hassan Elabadi•150

  @Elab4d1Posted about 3 years ago

  @pikamart thank you again for your feedback, those are really good advices and suggestions, I'll try to use them. Thank you

  0

  

  Hassan Elabadi•150

  @Elab4d1Posted about 3 years ago

  @pikamart I fixed the accessibility issues thanks to your suggestions, thank you :)

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, good looking solution! Your button is using the browser's default font-family though, you could change that! Also, I'd encourage you to try using relative units instead of pixels^^

  Marked as helpful

  1

  ---

  

  Hassan Elabadi•150

  @Elab4d1Posted about 3 years ago

  @FluffyKas thank you for your feedback, I'll use relative units in my next challenge thank you

  0
• 

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  Nice work👍🏻😊 Check the accessibility issue use semantic tags click to know more

  Marked as helpful

  1

  ---

  

  Hassan Elabadi•150

  @Elab4d1Posted about 3 years ago

  @JuveriaD thank you, I'll try to imporove the accessibility.

  1