Order Summary Component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Looks like you've got some html errors to fix from your report 👆

  This doesn't quite fit on my mobile screen atm. I'll add an image in slack so you can see what I see

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  I think the issues are caused by

  • height: 100vh; when it should be min height
  • min-width on the card that isn't needed at all and is actually wider than my phone screen - that's going to cause bugs for people and bring no benefit
  • lack of either padding on an outer wrapper or a little margin on the component so it never touches screen edges

  Marked as helpful

  1

  

  Cody Perry•90

  @CodyJPerryPosted almost 3 years ago

  @grace-snow Thanks for the feedback! I thought what I needed was both min-width and max-width to keep the card within the determined limits from the design. Turns out I only needed the max-width so the card didn't continue to stretch as the device width grows.

  Fixed the accessibility issue that was caused by trying to use a <meta> tag instead of a <link> tag for the favicon image.

  Also change the height to min-height which works much better. Seems like this is a better solution the majority of the time over staying at a fixed height setting across devices?

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @cperry24 there is rarely a need to set a height on elements. Exceptions are things like icons/svgs where you may want a fixed height/width. For components you want their height to be decided by the browser based off the contents inside it. You want it to be able to grow so when people change zoom or font size settings the content doesn't overflow.

  1

  

  Cody Perry•90

  @CodyJPerryPosted almost 3 years ago

  @grace-snow Awesome! Thank you for that explaining that :)

  0