MYSTERIOUS OVERFLOW: on majority of pages?

Design help General
1

I have a unwanted horizontal scroll on my site which I CANNOT for the life of me find! I know this is normally quite a simple problem to fix but I just cannot see it. Its also like the tiniest bit of overflow which bugs me out even more lmao

you can see the horizontal scroll on these pages
https://saint-financial-group.webflow.io/saint-media-marketing (unfinished - don’t judge)
https://saint-financial-group.webflow.io/
https://saint-financial-group.webflow.io/saint-accountants
https://saint-financial-group.webflow.io/saint-business-development
starting to realise its on all pages…

This makes me think its gotta be the navbar or footer? right? I still don’t see it :joy::sob:

Heres the link to the webflow preview

Any help is really appreciated

2

I think it’s the preloader.

On your load preloader interaction, start with it as display: none then display: block (or whatever display it should be)

On your hide preloader after it’s moved, reset it to display: none

I think that could be the issue as you’re moving it 125% out of frame, but not hiding it from the DOM (opacity = the element stills exists but it’s just “see-through”, display: none will remove it from view altogether)

Try that and reach out if it’s not it! I know how frustrating these “minor” things really are! :rage: :grinning_face_with_smiling_eyes:

1 Like
3

Good call, however no luck :frowning:

See the updated site here

4

CleanShot 2021-02-17 at 12.20.03
CleanShot 2021-02-17 at 12.20.03953×508 60 KB

I think it’s these. You could try setting overflow: none on the parent element that contains these moving words on scroll.

1 Like
5

This page is a horizontal maze, but the parent element holding this div is set to overflow: none and a max VW of 100.

The overflow is also very consistent across the site pulling me away from the idea that the element is shared across the site. (footer, navbar etc)

6

Yeah, there’s a lot of interactions that could be causing this :grimacing: It’s going to be one of the parents.

You could either add a custom bit of code to the site to stop any overflow that happens, or set all of the parent containers to overflow: none. (Don’t add to the body in the designer as that will prevent scrolling)

7

Try adding this to the Site settings custom code in the <Head> section.

<style> 
html {
overflow-x: hidden;
}
<style>

Publish the site and check it (won’t work in the designer mode).

Should be OK in most browsers, but do test published site on a few devices if you can.

8

Yes! I was actually just about to comment!

I actually had this within my sites setting but the overflow-x: was set to inherit? I am not exactly sure on where it would inheriting from, so I did change it to hidden and it works the charm! Thank you for your support Mark!

9

Okay this came with some weird side effects…

  • Viewing on tablet and lower, random elements just are not there, interactions just dont work period…
  • Seems to turn the horizontal scroll interaction on desktop has speed up 1000x
10

Oops: GIF was waaay too late!

1 Like
11

I have disabled the overflow hidden in the site settings, what do you recommend?

Thank you for your consistent help btw

12

I should have added the caveat that it’s a last resort.

The better way would be to find the offending parents, and set overflow hidden on those elements. Part of the trouble is adding interactions too early. It’s ideal flow to get the structure right first, as right now you have a site that is unfinished, but still really complex.

I’d save a backup of the site, and start removing sections one at a time until you no longer get the horizintal scroll, then when you know which sections are causing it, add it back and debug from there.

1 Like
13

Great idea, Thank you! Ill let you know how it turns out!
Thank you for your help