Background Behavior Different from Preview to Publish

Right now, when previewing my site, it’s perfect. When actually publishing the site, the bottom of the page is doing weird things. Some text/content is running into the bottom of the page and overlapping with the border.

When previewing, this bottom area is supposed to allow for the user to scroll (which is great). Again, in preview, it’s perfect, the published version is messed up.

What can I do?

I have screenshots.


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

Links to the site

Preview is here:
https://preview.webflow.com/preview/sitetomorrow?preview=d736c8dec059cb1653ade9efae51ff08

and site is live here:
sitetomorrow.webflow.io

Hello @ivan,

You can try changing Backgroud-body Overflow from Scroll to Hidden.

That might help.

Best,
Erbil

Thanks, Erbil, but that won’t work. Hidden means viewers can’t see the content at the bottom of the page. I need viewers to be able to scroll. The problem is the published site is showing content overlapping with the site edge/border.

Just to re-state, it looks perfect when previewing, but not when publishing, so there’s something wrong here.

THIS IS A BUG (…right?)

Hi @ivan, thanks for the post. I would change things up a little bit in the design. Instead of applying the background-body class on the body directly, I would do the following:

For the Body (all pages) class, give that a height of 100%.

Then drag a div block under the body and assign the body-background class to the div.

Drag the other content into the div you just created:

Set the background-body class to height of 100% and remove the height min value (previously set to auto).

Could you try those suggestions and then republish and see how things look? Let me know how it goes :slight_smile:

That seemed to work.

Thanks!

1 Like

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