Order summary component challenge using CSS flexbox

Community feedback

• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey arnav-sahoo, good job completing this challenge. Keep up the good work

  Your solution looks great however I think your card title needs some margin from the top using margin-top. Secondly the button for the text "Proceed to Payment" should have the background color specified in the style-guide.md file.

  I hope this helps

  Cheers Happy coding 👍

  1

  ---

  

  darthTh0t•50

  @darthTh0tPosted over 2 years ago

  Hi @TheCoderGuru, yes I took some liberty regarding the color and the design. But I have made the necessary changes and uploaded the correct version in my github repo. It should reflect here too. Thank you so much for your awesome feedback.

  0
• 

  dreyz•180

  @tristan-derezPosted over 2 years ago

  Hello!

  • You should use semantic html for your elements, check your report in accessibility section.
  • Check HTML validations too (you should use '/' not '' for image path).
  • Maybe you could add a margin-x for 320px viewports.
  • Also, the height does not seem to match the design, I think this is very easy to fix.
  • About responsive design I recommend watching Kevin Powell's video, he explains very well.

  I hope that helps :)

  0

  ---

  

  darthTh0t•50

  @darthTh0tPosted over 2 years ago

  Hi @dreyzu I have seen the accessibility issues, but I am unable to understand the landmark part. There is a link to a document underneath each issue, but I am unable to understand what is the mistake in my code and how to rectify it.

  0

  

  dreyz•180

  @tristan-derezPosted over 2 years ago

  @arnav-sahoo

  replace <div class="main-container"> with <main> <div class="attribution"> with <footer> and so on :)

  hope this clarifies it for you

  Marked as helpful

  1

  

  darthTh0t•50

  @darthTh0tPosted over 2 years ago

  Thank you so much @dreyzu

  0