Background Gradient Design Element Not Scaling Properly on Client's Browser

[learyjk (Keegan Leary - Web Bae)]

Having an issue with a background gradient design element in hero section.

Slope - Offer Buy Now, Pay Later to your buyers without the headache.

I thought everything was good to go, but when I sent the enhanced staging link to my client, on her browser the gradient is clipped by “hide overflow” from the gradient bounding box. See attached image:

However, I can’t recreate the issue on my own machine. I tried all sorts of browser aspects (see video) https://youtu.be/q91IpS8W13M

Since I cannot recreate the issue. I’m not quite sure where to start. I asked my client to clear her browser cache but that didn’t fix it. I’ve also asked for her specific browser resolution as a starting point.

Here was my thought process on creating the design element so it would scale for all screens.

1. create wrapper div with height of 100vh, position absolute, overflow hidden.
2. put gradient in the div, also absolute, aspect ratio locked with height at 100vw and width at 100vw.
3. I ended up changing width to 1000px. Maybe this is what’s causing the problem?
4. Position gradient using absolute position offsets and transformation effects.

I played with it for a while until I had something that scaled nicely. Unfortunately it doesn’t seem to scale the same on other browsers.

Any thoughts? I didn’t find much content or other tutorials on “how to create rotated gradient half backgrounds” so attacked it with my best engineering skills but guess I didn’t quite stick the landing.

Pretty embarrassed that I sent this to my client but that’s life I suppose.

Thanks again. Keegan

---

Here is my site Read-Only: https://preview.webflow.com/preview/slope-example?utm_medium=preview_link&utm_source=designer&utm_content=slope-example&preview=bcd855322dd33a39821b0a95399fcd02&workflow=preview

[learyjk (Keegan Leary - Web Bae)]

I fixed this by changing the gradient wrapper height to 1000px, which I had at 100vh early. On screens where the gradient exceeded screen height this would causing clipping. I’m not convinced this is the best solution but works for now.

Note to self: Check designs on non-retina screens before shipping.

Still curious if there are any tutorials or design guidelines for achieving this look. Thanks!