Search code examples
jqueryhtmlcssowl-carousel

Whole Website moving left on iPhone when swiping - how does one turn that off?

When I open the website http://www.stuttmann-karikaturen.de/karikatur/6358 in Chrome, make the browser window as narrow as possible and then swipe the image to the left with the mouse, everything works as it should - the title stays in the center and the image moves:

In Chrome with window made small

If I switch to iPhone 6 view mode and do the same, the title moves to the left as well (just as it does on a real iPhone):

In Chrome in iPhone 6 mode

I don't know enough CSS to find the reason behind that (I didn't write it, that's my excuse).

I checked if on of the containing elements (1, 2 in image below) is too wide, but as far as I can tell it fits the phone width exactly (both are set to 375, matching the width of the iPhone view in Chrome) (3): Container widths

So it seems that neither

<div id="container">

nor

<div id="wrapper">

are responsible. I guess there is a difference between the behavior of swiping in a small browser window and the one in an iPhone. How can I turn that off?

Additional note: the owl-carousel is just to add this gallery functionality to jQuery. I did not post additional code because (a) the issue is visible online and (b) there's a lot code involved that could be responsible so I post it on request.

Solution

  • Try to make a 

    overflow-x: hidden

    on the body, it will fix your problem.

    This bug is present because image width in your slider is too large