Order summary component

Community feedback

• 

  P

  Øystein Håberg•10,510

  @Islandstone89Posted 10 months ago

  HTML:

  • <main> should not be wrapped in a <div>, and you can remove #container.

  • Use classes instead of IDs.

  • The image is decorative, meaning the alt text should be empty: alt="".

  • "Change" and "Proceed to payment" are links, as they would navigate to another page. "Cancel Order" triggers an action, hence it is a <button>.

  CSS:

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

  • Move the properties you had on #container to the body, and change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • 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.

  • line-height must also never be in px.

  • You don't need to set font-family on each element. Set it on body, and remove it elsewhere - the descendants of body will inherit the value.

  • Likewise, set text-align: center on the body, and remove it elsewhere.

  • Except for on the icon, remove all fixed widths and heights.

  • Make sure to give the "Proceed to payment" link a display: inline-block and width: 100%.

  • Add display: block and max-width: 100% on the image - the max-width prevents it from overflowing its container.

  Marked as helpful

  0