Sorry, we don't support your browser.  Install a modern browser

Checkout Overlay Background Doesn't Fill the Entire Height

?

It seems that there’s a styling issue on the Lemon Squeezy checkout overlay where the page background doesn’t fill the entire height of the screen if the checkout dialog is too small, e.g. when entering a discount code to get a product for free.

The background div (.bg, child of .ls-checkout) is absolutely positioned. Changing its positioning from absolute to fixed solves this issue. Even better would be to set the background on the iframe itself. Here’s a demonstration of what I mean: https://share.cleanshot.com/4ZLhN3P2

7 months ago
4

Yes please I have the same problem and it looks so ugly

6 months ago
4

Yeah, I have that problem too, and see that another way to fix it would be to set the min-height of the ls-checkout-embed element to 100vh, but that isn’t the only problem: there is a white overlay behind it which is displayed as the checkout is loading, which is both very jarring for users of my app who are using dark mode, and it stays there after loading so I can’t make my background colour translucent to show the core app behind it. Even when there is a dark background the form still stays white. Please make this properly cusomisable and a first class system when integrating an overlay into an app that has both light and dark mode support.

2 months ago
1