Need advice - Sitebar and mobile view!

Hi folks,

I might need an advice even though I cant post any video or picture that describes my problem.
But my setup is like this:

body
   div "sitebar"
   div "wrapper"
        div "header"
        div "and all the rest of the site"

I do have a navbar with a hamburger, that opens a sitebar on mobile devices.
Currently it is set to position:absolute with an offset of 300px to the left (its width is 300px).
Also because it should not overlay the content, the trigger also pushes the div called “wrapper” 300px to the left, so when the sitebar is visible, the whole site gets pushed to the side.

My problem no is that when I watch the site on a mobile device like iphone and I trigger the event, the sitebar gets pushed, the content gets pushed but then my phone displays the whole website within its viewport, resulting in a “zoomed” or “scaled” view. I dont want the site to be displayed like that.

Anyone got an idea what this could be?
It happend also on my ipad but not that often as on the iphone.

Also tried to implement all kind of “meta tags with content view…and so on”.

This is a rude scribble of the situation:

First one is how it SHOULD behave, second one is the way it is behaving

Can you please share your public link? How to Enable a Webflow Share Link - #3 - Webflow Tips - Forum | Webflow

1 Like

https://preview.webflow.com/preview/testingforforum?preview=c5220612bc4e1029c7a6640367edf87b

testingforforum.webflow.io

have you tried wrapping everything in a div (under the body) that has a width of 100vw and property overflow:hidden?

1 Like

That worked like a charm! Thanks :slight_smile: :beer:

1 Like

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