Responsive Order Summary Component using HTML5 and CSS3

Community feedback

• 

  matthewohreluy•95

  @matthewohreluyPosted about 3 years ago

  Yours looks really clean. It's perfect.

  Marked as helpful

  0

  ---

  

  Ahmed Faisal•5,095

  @afrusselPosted about 3 years ago

  @matthewohreluy Thanks

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop and mobile seems fine. The desktop I think is too big.

  Some suggestions would be:

  • Avoid using height: 100vh. This will limit the height of the element and it will be fixed to 100% of the viewport's height. If you inspect your website in dev tools at the bottom, you will noticed that it can be scrolled. Instead, replace it with min-height: 100vh, it will take 100% of the viewport's height and it will expand if it needs to. You don't need to have the overflow: hidden, this will just cut the website which is not really good.
  • Wrap the whole content inside a main element. This will make it more structured and help user to navigate in your website.
  • The alt value of the music-icon should be left empty like alt="" since it is not really adding to the content. If the img adds value to the website, add a descriptive alt if it is just decorative like this one, leave it alt="".
  • Also, avoid adding words that relates to "graphic" like "icon, image, illustration" as a value in alt text. Assistive tech will handle those for you.
  • Check the change dimension, try using tab key in your keyboard, you will notice that it takes a large portion compared to its content. You might want to check that one out.
  • Lastly, adding some padding to the top and bottom of the body tag, just to prevent the layout from touching the ceiling and flooring of the screen.

  Aside from those, great work.

  1
• 

  uiGuy•255

  @uiGuysPosted about 3 years ago

  Great work, so nice. Keep it up

  0