Streaming live at 10am (PST)

Site is moving left and right on export


#1

https://preview.webflow.com/preview/outbxd?preview=517116394ae377b49a306e67856f296c

When i export the site the canvas is moving left and right ( export link: http://outbxd.webflow.io ). I do not know why is this happening, could someone help please? This was not happening yesterday that i was working on it.


#2

Hi @Tasos_Koutsofavas

Thanks so much for posting.

What section(s) are moving? Can you please share some screenshots/recordings of this behavior?

Everything appears to be working from my end.

​Thanks in advance, and I'm standing by for your reply.


#3

check your overflow setting


#4

hello! All the site is moving apart from the page with the project planner.
If you follow this link and grab the site and move it left and right you ll notice this: http://outbxd.webflow.io
The funny thimg is that in webflow it all seems fine, problem starts when i export it.


#5

checked overflow, did not sort the problem


#6

@Tasos_Koutsofavas

Did you try setting each section to overflow: hidden? If not can you please try this and let me know if it solves the issue?


#7

Something is larger than 100% or nested wrong, I also get this problem sometimes. The thing I do is to make sure that all widths are: 100%, 100vw & of course less than the screen width


#8

I just did in home. Problem still there.


#9

Have been checking all elements. Nothing is more than 100% or 100vw


#10

Can you please share some screenshots/recordings of this behavior? I am not seeing this horizontal scrolling issue on my end.


#11

when i open it from a laptop it looks ok, when i open it from a large desktop it moves left and right. I am posting a video


#12

I can recreate it on my laptop which has a big screen. I tried chromes dev tools, the issue might be absolute positions? Also, try using % instead of px when declaring sizes, it makes things a lot funnier!


#14


#15

I think there something wrong in your project class

you have 2 rows of projects. when you delete one or both... the scroll issue is still there.

but when I delete class list-of-projects
the scroll issue goes away.


#16

Unfortunately this does not work. I deleted the classes, rebuild it with other classes but the problem is still there.


#17

Are you on Windows?

I think this may have to due with the scroll bar when using vw on Windows.

100vw on OS will include the scroll bar, while 100vw on Windows excludes the scroll bar. This results in the extra width. Try using 100% on the widths of your sections instead of vw.

This article has some more info.

Hope this helps :slight_smile:


#18

no it's mac too.............


#19

Ok, i am on a Mac but the problem occured when i switched from width100% to 100VW and the same , so ill give it a go and let you know.


#20

Thats right :slight_smile: you r correct! problem occurs on mac too!


#21

that's what I was trying to track down...
trying to see if 100vw was the issue