How to set a max width for body?

[erbils]

Hello,

I’m working on a new website with some background animations.

At both sides of the web page two big illustrations animate in/out and rotate in a loop.

I want them to be moving out of the canvas a little bit and get back in. It works, however the width of the page is dynamically changing with the animations.
http://kitaplar-guzeldir.webflow.io/

It doesn’t bother much in desktop, other than seeing scroll bars of the browser going crazy.

But in mobile Safari zooms out to include full body width of the page. so the container only takes about 30% of the page. Besides, everything is constantly re-arranged because of the animations of the images.

What would you recommend to prevent body width of the page constantly changing?

Thanks!

Erbil

---

Here is my public share link: https://preview.webflow.com/preview/kitaplar-guzeldir?preview=f430f93b434ef285a178994d2e0b721d

[Joscreative (Jos Helmken)]

You can’t set a max width on the body itself so i would make a container and move all content into this container. Then you can set the max width of the container to 100% to prevent it to chance.

[erbils]

Thanks @Joscreative !

I’m trying to do what you said, but I can’t assign max width for a container as well.

[Joscreative (Jos Helmken)]

Yes the container of webflow is pre configured to be a 960 grid version. To solve this you can just use a regular div.

[erbils]

I’ve created a Container, placed a Div inside with Max 100% width and height. Set the overflow hidden.
placed the two animating img elements inside the div. Still no luck.

Even in the desktop browser vertical scroll bar appears. and in mobile still it’s zoomed out.

Can it be interaction’s move overrides the div and containers max width?

And Img elements position are set to Absolute.

might that be the problem?

[erbils]

Oh Yes! After changing position to Relative and reposition the images it worked well!

Thank you very much @Joscreative !