๐Ÿž
Gumroad Mobile Web Styling Issues
All issues were first found in Safari iOS and reproduced in Opera (chromium) desktop browser in responsive mode with iPhone X viewport.
Date: Apr 5, 2021 at 23:53 GMT+3
ย 
  1. Broken "Add a discount code" section when creating new product. (still broken โ€“ last checked Apr 18, 19.45 PT)
    1. โ˜ข๏ธ What's broken: the "Name" and "Amount off" input fields are overlapping which make it unusable.
      ๐Ÿ”— Example url: https://gumroad.com/products/nFTrg/edit#checkout (must login as user)
      notion imagenotion image
      โœ… The quickest fix (with least effort) is to render those fields in row direction:
      notion imagenotion image
      ย 
  1. Navigation menu is broken in Settings > Upgrade page (still broken โ€“ last checked Apr 18, 19.45 PT)
    1. โ˜ข๏ธ What's broken: the navigation menu is overlapping with page title.
      notion imagenotion image
      โœ… Allowing the menu to horizontally overflow should fix it:
      ย 
  1. Modals, navigation, and help content are off screen (still broken โ€“ last checked Apr 18, 19.45 PT)
    1. โ˜ข๏ธ What's broken: some section of the page are clipped, and some others make the layout inconsistent.
      ๐Ÿ”— URLs:
      notion imagenotion image
      โœ… One possible fix is to put max width on the offending contents:
      notion imagenotion image
      ย 
  1. Tooltip content in Upgrade Account page is off screen (still broken โ€“ last checked Apr 18, 19.45 PT)
    1. โ˜ข๏ธ What's broken: the content is clipped and unreadable because it goes beyond the viewport.
      notion imagenotion image
      โœ… The fix is to put max width for the tooltip content:
      notion imagenotion image
      ย 
  1. Z-Index collision in Upgrade Account checkout page (still broken โ€“ last checked Apr 18, 19.45 PT)
    1. โ˜ข๏ธ What's broken: texts from Upgrade Account checkout page ("Pay $10 Monthly", "Pay $108 yearly", and "Save 10%") overlapped with navigation menu due to broken z-index
      notion imagenotion image
      โœ… To fix this, adjust the z-index of the offending texts:
      notion imagenotion image
      ย 
That's it, thanks for reading and happy birthday ๐ŸŽ‚, Gumroad!
Was this helpful?
ยท
โ€ฆ views

Loading Comments...