Streaming live at 10am (PST)

Background gradient doesn't fill up the whole page on TABLET


#1

My website has a white to blue gradient which is supposed to fill the whole page. However, when my tablet views the site in landscape, the bottom of the page is just an abrupt change to white. I had the same issue with this on all devices, because I used a top margin instead of top padding on the content container. However, on tablet, the problem still remains.
In a computer window:

On the tablet:

Read only link: https://preview.webflow.com/preview/abps-mark-2?preview=10ae3332f29e48cefc6ea78323c4425b


#2

I cannot replicate what you are seeing in any browser.

I am not sure exactly why it's doing that but it's likely due to your site structure. Your whole site is nested inside a inside a container div. This isn't really the best way to structure your site for a responsive design. If you only want a desktop only design, then you can disregard this advice. If you remove the container div, you should have a design that spans the width, this is generally the way responsive designs should be structured which allows the content to take up the full width.


#3

If I don't have the container div, everything will stretch to the edges of the screen and look bad on desktops. I coded my container div to have a max width of 960px, as is the standard on most websites, but the container div itself adjusts its width, and the items within adjust as well to look good on any tablet or computer.

Are you just giving this as a suggestion or am I actually doing something wrong with my organization? This seems like a bug on WebFlow's end. Nowhere in the documentation does it say that if your background is a gradient, and it only contains one div inside it, the gradient will truncate near the end of the page.


#4

Also, update: I tested the site on a chromebook and am getting a similar issue with the background.
On a Chromebook:


#5

Okay, after some more testing, I think what's happening is that the background gradient is repeating after it has passed 100vh, which is the height of the background element. I just want to have the background gradient stay from white to blue no matter where you scroll, but I can't switch the background element to be fixed. Any ideas?


#6

Alright, after I figured out that it was just a repeating gradient, the problem got solved quickly. Instead of styling the body element itself, I created a new div called "background" and housed everything inside it. I used this thread for help.

Just posting this in case anyone comes across a similar problem.


#7

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