Webpage has a large right-margin in iOS

Question

I have checked everything on my page and cannot figure out what is giving my website a large right-margin in iOS. It's driving me crazy. I've tried setting overflow: hidden; on the body to no avail. There is nothing that is wider than 960px. This is a very responsive design and all is working well except this one infuriating thing. Here is the URL to the dev site: http://ourcityourstory.com/dev/

Please see attached screenshot: iOS displaying large right-margin on webpage

Any help would be appreciated.

Update: I've tried fooling with the viewport. See this Stackoverflow post. But to no avail. I built the entire site off of the HTML 5 Boilerplate

@biziclop Did you drag right? It renders full screen and fine, but there is a horizontal scroll bar if you drag left or right. — Jesse Atkinson, Jul 06 '12 at 13:19
It is not draggable left or right in: iOS Simulator 4.3: iPhone 4.0.2, 4.3, iPhone simulator 3.1: iPhone 3.1.2 Didn't you updated it since your question? — biziclop, Jul 06 '12 at 13:28
I'm seeing it on my iPhone and iOS Simulator. I'm running 5.1. — Jesse Atkinson, Jul 06 '12 at 17:00

score 3 · Answer 1 · answered Aug 16 '13 at 06:57

3

       html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

Add this to your CSS. then it should be working fine

answered Aug 16 '13 at 06:57

Pradeep Wickramanayake

75
1
12

score 0 · Answer 2 · answered Jul 06 '12 at 17:30

0

The culprit was the Facebook share button. Instead of behaving like Twitter or Pinterest it iframes in and sets a width on the body of 500px!

A simple overflow: hidden; on my .social class fixed this.

answered Jul 06 '12 at 17:30

Jesse Atkinson

10,586
13
42
45

Webpage has a large right-margin in iOS

2 Answers2