Order Summary Component Challenge builded with basic HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general is fine. About your query, let's try to fix that.

  • What you only need is the size of that background image. Try using background-size: contain that should fix it.
  • On making it responsive, to be honest, I was confused on how did this work. Remove the width property on the body. I was like "oh, how did it fix that" hahahah.

  Some other suggestions would be:

  • The imgon the card should have used alt="", since it is just a vector image. When an image only acts as a decoration, better use alt="" on them, if the image adds content to the website, use a descriptive alt value. Also, avoid including words that relates to "graphic" like "picture, drawing, icon, logo" as a value in the alt attribute. Assistive tech will handle those for you.
  • The music-icon should use alt="" as well, it is just decoration.
  • The change should be a link a tag, not p. An interactive element should use an interactive html element. p tag alone is not interactive, well I am talking about having focus.
  • proceed to payment and cancel order should use a tags as well.

  Other than those, it looks good. Great work.

  Marked as helpful

  0

  ---

  

  murilo•110

  @mlzziPosted about 3 years ago

  @pikamart Hey,

  I just want to thank you. Your solution worked fine. And thanks for the tips. I already made the changes and all works great.

  Thanks so much.

  0