Having background gradient troubles in mobile

Hey, so I’ve been at this for a few days and while I think my website looks nice on Desktop and tablet it is having some trouble translating to mobile. I decided to make the mobile version more simple than the desktop version. For the most part it’s working but the one thing that I can’t seem to get right at all is the background gradient.

I have a CSS gradient in the desktop version that was repeating in mobile when scrolling which looked really bad. I thought maybe if I make the gradient in photoshop and then drop it in as a background image set to cover and fixed (with no tiling) that this would help. I figured the background would fit a phone size and then you could scroll through the content while the background remained fixed.

What I found instead is that as you scroll down you scroll PAST the background into white space. This looks even worse than a repeating CSS gradient.

Any tips here?

EDIT: Forgot to add that the mobile preview in the webflow editor looks nothing like how it does on a real phone. In webflow it looks like the scrolling is acting correctly for mobile, but not so on a real phone. I published to web to check it on my Android.


Here is my public share link: LINK
(how to access public share link)

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.