Order summary card html and tailwind-css

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  This overflows my screen and breaks very badly for users who use a different text size. It would also break if authors changed the text in any way.

  The reason is a foundational and essential one: do not set explicit widths and heights on components. Let the browser do it's job and decide what height is needed based on the content of the card. Use max width (in rem) instead of width so the component can shrink narrower when it needs to.

  Buttons and paragraphs should not have explicit widths either. In fact the only elememt that should have an explicit width is the music icon. The button should only be full width (100%).

  The other important problem I note is around the use of alt text on images. This is not how to use it. I recommend you read the excellent post I the resources channel on discord about how and when to write alt text on images.

  The last thing is more of a question for you to explain — why is change an anchor, proceed a button and cancel a button? That may be fine, but can you explain why you chose each one? (What you'd expect to happen on click)

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  I've just had a quick look at your other solutions and it looks like you'll need to fix the same issues in previous projects. I'll add Screenshots to your discord post to demonstrate why limiting the height of elements that contain text is such a problem.

  1