Gradient doesn't fill entire div on tablet

On each of the images heading the different sections of my page, there’s a gradient that fades to white. However, it isnt’ really working on my tablet. How can I make it fill the whole div?
Intended Appearance:

On an android tablet:


As you can see, the top pixel of each image has no gradient over it, which ruins the feel of the image completely fading to white instead of abruptly ending. How can I fix this?

Link:
https://preview.webflow.com/preview/abps-mark-2?preview=10ae3332f29e48cefc6ea78323c4425b

Make the gradient on the edge more concentrated so you won’t see the line. :wink:

What do you mean by “concentrated”? It already fades to 100% white.

Spread it out more or make the other side at a higher opacity.

How would I spread it out? The backgrounds are supposed to fill the entire dimensions of the div.

And I don’t want the other side to be a higher opacity, the bottom of the div is supposed to be transparent.

I am sorry to report that I believe your only fix for this is going to be either: edit the images to include the gradient, OR create a container div for the images that is one pixel taller than the image, and apply the gradient to yet another div that would sit atop the image.

Since it seems like you are trying to use only part of the images anyway, I would suggest just cropping the images and applying your gradient in whatever image editor you use. Lower file size + the total control over the effect you desire = win.

Actually, you could do it with a container div by applying the gradient to it, then inserting the image and giving it a negative z-index value. Now that I think of it, that may solve the issue altogether.

I would test it, but I don’t have my tablet with me.

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