Order summary component

Community feedback

• 

  P

  Øystein Håberg•10,610

  @Islandstone89Posted 11 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. You can either wrap the card in a <main>, or change .card into a <main>.

  • Personally, I wouldn't use <header> for the image section of the card.

  • The music icon is decorative, so the alt text must be empty:alt="".

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • body doesn't need width: 100% - as a block element, it is 100% wide by default.

  • Change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove all fixed widths and heights. Except for icons, you very rarely want to set fixed dimensions (especially heights), as this prevents components from adapting to different screen sizes. If needed, add a max-width in rem on the card.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • letter-spacing must also never be in px.

  • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px.

  Marked as helpful

  0

  ---

  

  Hugo•90

  @Hags97Posted 11 months ago

  @Islandstone89 Thank you for your feedback. I'll review everything; I appreciate that. :)

  1