Order summary component

Community feedback

• 

  T

  Josh•400

  @burrijwPosted over 1 year ago

  Nice job!

  There’s horizontal overflow at 320px wide. This is inaccessible per the WCAG 2.1.

  “Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:”

  • “Vertical scrolling content at a width equivalent to 320 CSS pixels.”
  • “Horizontal scrolling content at a height equivalent to 256 CSS pixels.”

  The <h4>Annual Plan</h4> should be some other element. Heading elements should be used as headings for sections of content, not for text that appears to be bolder, larger, etc. You can use CSS for appearance. From MDN:

  • “Do not use heading elements to resize text. Instead, use the CSS [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) property.”
  • “Do not skip heading levels: always start from <h1>, followed by <h2> and so on.”

  You’re missing hover states on the “Change” and “Cancel Order” links.

  The background image doesn’t meet the width of viewports over 1440px.

  It looks like the background image isn’t changing between mobile and larder breakpoints. You can use a media query to change it.

  I think some spacing is off between mobile and larger viewports. Another opportunity to use media queries.

  Marked as helpful

  0

  ---

  

  Tales Ribeiro Oliveira•50

  @oliveiratalesPosted over 1 year ago

  Hi Josh,

  Thank you for the tips, I already change your advices in the project and I'll use it for my next projects.

  Best regards, Tales.

  0