Order Summary Card using CSS

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted almost 3 years ago

  Overall this is really good

  Just some common beginner improvements to make

  • swap section for a main element
  • remove the alt text value on music icon and leave of intentionally blank like alt=“”. To ensure this is ignored by all assistive tech and search engines, I recommend adding aria-hidden true or role presentation
  • it’s best practice to include a css reset at the start of all css projects. That removes different browser styles. I like Andy bells modern css reset, but there are loads out there. Eg it will set images to be display block
  • in css never put font size in px. Use rem instead
  • probably change height 90vh to min-height.

  There may be other things but all pretty minor so I’ll leave it there.

  Good luck on your next challenge 👍

  Marked as helpful

  1

  ---

  

  Tamara Carlos•30

  @aramatsolracPosted almost 3 years ago

  @grace-snow I just finished all the improvements! I couldn't be more thankful for your feedback. I feel like I have learned a lot in the couple of days that I have been studying to put it into practice. Thanks again :)

  1
• 

  T

  Grace•30,990

  @grace-snowPosted almost 3 years ago

  You’ve removed an essential meta tag from the html head that makes this viewable on mobile. You need to put that back in - it’s something about viewport. If you redownload the starter files it will be there or just google viewport meta tag and should find it

  Marked as helpful

  0

  ---

  

  Tamara Carlos•30

  @aramatsolracPosted almost 3 years ago

  @grace-snow Thanks for the feedback. :D I just fixed that.

  0

  

  T

  Grace•30,990

  @grace-snowPosted almost 3 years ago

  Well done @aramatsolrac

  So now I can preview on mobile I can see it doesn’t fit on my screen. This is where the advice below comes into play, like using max width instead of width 400px, and adding padding on the outer wrapper or margin on the component to prevent it ever hitting screen edges.

  Good luck

  Marked as helpful

  0