Order summary component using html, css (media querys, flex)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container especially the body tag, this makes the element's height limited to the current remaining screen's height. Instead, use min-height: 100vh, this takes full height and will expand if it needs to.
  • Also, I would not alter the width of the body tag, you could alter the main.
  • The alt value for the vector image should have been left empty like alt="" since it is only decorative, also add an aria-hidden="true" attribute on the img element as well.
  • When an img acts as decoration only, use the above method, but if the image adds content to the site, then make a meaningful alt value.
  • Always include a h1 on a webpage, for this one, you could use h1 on the order summary but really, it is not suited to be h1 therefore, you could make the h1 a sr-only text, you can look that one up on the net:>
  • The music icon also should have used the mentioned method above since it is decorative only. Also, when using alt attribute, avoid adding words that relates to "graphic" such as "icon, logo, image.." it is already an image so no need to describe it as one.

  Aside from those, great work on this one again.

  0