Order summary - work in progress

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. The site looks great in general and it scales well in small width-devices.

  Some suggestions would be:

  • For the background, use background-size: 100% so that it will fill all x and y axis of the screen.
  • It would be great to have a base styling with these properties

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

  • On this one, the .card should be using the main instead so that the element that has content are inside a main-landmark element.
  • Vector image should be hidden since it is only decoration. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • Same goes for the music-icon, hide it since it is only decorative.
  • I think for the last 2 button tags, you don't need to use aria-label since the text is descriptive enough to inform a user what those should do, though for the first button I can agree with you using aria-label to it or maybe sr-only text inside.

  Just those only. Again, great work and hope the new job works well.

  Marked as helpful

  1

  ---

  

  LouiseCW•235

  @costelloewardPosted about 3 years ago

  @pikamart Thanks very much! Lots to think about - I'll try some of these out!

  1