0

I've got a client's responsive site which is used for mobile purposes only. It works great on every phone except for Iphone 6. Home page loads fine but every inner page gets a weird overflow with a big border at the left side of the screen (see attached image).

  1. Tried to add special breaking points just for Iphone 6 from this thread.
  2. Tried to add an outer container to the main container with width:100%;.
  3. Tried to add overflow:hidden; to the body and to the inner container.
  4. Tried to add overflow-x: hidden;.

Nothing worked.

  1. Tried to add position:fixed; to the body just to see of it will work. The overflow of the screen was gone but the site was of course not scroll-able.

I don't have a mac to debug this issue with developer tools and that limits my options. On all mobile emulators, Chrome, FF, IE, the site looks o.k. On Browserstack I could see the bug but couldn't debug it there. It's not a single phone issue, tested on several Iphone 6 devices.

Any other ideas please?

Site link.

Community
  • 1
  • 1
user3764541
  • 43
  • 1
  • 8

1 Answers1

0

Solved!!! Had an issue with the some uls in the page. Added overflow:hidden; and it solve the problem.

user3764541
  • 43
  • 1
  • 8