Responsive order summary component with flexbox

Community feedback

• 

  Haziq•320

  @zyq-mPosted about 3 years ago

  Hi Quentin.

  Well done buddy. That was close to design. I notice that your order_summary is not centered well. You forgot to set the height of the body. You can fix this by:

  • set the height of body body { height: 100vh; }
  • remove margin-top of order_summary

  That's it. Happy coding!!

  0
• 

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted about 3 years ago

  Well done Quentin, as it is your first solution you did a great job.

  I have some suggestions for you,

  • All tags have semantic meanings so use appropriate tags, proceed to payment more likely an anchor tag because it implies to navigation but it is 100%, not an h3
  • Your images should have alt attribute but for decorative images, you should leave alt as blank and use role=" presentation" or aria-hidden=" true"
  • Don't use width instead of try 'max-width'
  • To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:

  <section>
  </section>
  </main>```
  

  0