responsive site on mobile- horizontal slop on the iPhone

**rickarooni** · Mar 14, 2012 12:45

I'm creating my first responsive-design site and so far so good. It's almost done, but I've noticed something. It looks good on iPhone and I'm using media queries but when I view the site on my iPhone I can drag the whole layout side to side so far the I can make only the iPhone gray background show and then let go and the page springs back into place. I'd like the site to be rock solid so you can't move it side to side. When a user goes to scroll something the site is drifting side to side. Is there a way to eliminate this?

code-wise, I have too much to put it all here but basically I have my media query saying:

@media screen and (min-width: 320px) and (max-width: 674px) {
#page-wrapper {width:auto;margin:0 auto;padding:0 1em;}
}

I've tried changing all those values but to no avail.
in my <head> I have:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Thanks in advance for any help.

Rick

**RyanReese** · Mar 14, 2012 13:11

From what I've researched, try doing this.

**rickarooni** · Mar 14, 2012 13:23

I just did that and... the problem is not as bad, but I can still move the page side to side. If I just look at my browser that I'm shrinking to do testing, the layout is rock solid and no scroll bar, but the phone, though better, still has a lot of horizontal play in it. Some better, though. thanks.

Rick

**RyanReese** · Mar 14, 2012 13:33

I doubt there's anyway to further restrict it, to be honest.

I've been searching for the past 10 minutes and there seems to be nothing available online to possibly stop this. I saw mention of some Javascript but I couldn't make much sense of it. Perhaps the answer lies there...

**rickarooni** · Mar 14, 2012 14:08

I've made some adjustments with success.
#page-wrapper {
width:auto;
max-width:auto;
padding:0 1em;
margin:9px;
}

It's rock solid in portrait and landscape views but the margins on the sides are a little to much for me. I tried reducing the values on margin and padding and this is the best I can do. Anything else and I get the problem again. And of chourse I don't have any other idea what other mobiles are doing.

BTW: do you have a mobile/tablet emulator that you'd recommend?

Thanks,

rick

**RyanReese** · Mar 14, 2012 14:30

Well, I have Opera installed for testing on my computer anyway, so I've picked up this tool

.

**ralph.m** · Mar 14, 2012 18:02

I had this sliding problem but fixed it. Not sure what actually fixed it any more, but you seem to have everything I have, except max-width: 98%;

Originally Posted by rickarooni

do you have a mobile/tablet emulator that you'd recommend?

You can load Opera on your iPhone, so that's the first think I'd do.

Also, check out Mobilizer, which is a free desktop app that emulates iPhone, Android, Blackberry and Palm Pre.

**rickarooni** · Mar 15, 2012 09:44

what totally fixed it is putting overflow:hidden also on the page-wrapper div. I got that idea from you. thanks again.

#page-wrapper {
width:auto; overflow:hidden; max-width:auto;padding:0 .5em;
}

Everything works now.

rick

**RyanReese** · Mar 15, 2012 09:48

It's weird that that fixed it, while putting it on the body did not. You'd think that putting it on the body would restrict the entire page, in taht sense. But I guess not. Good job figuring it out

.

User Tag List

Thread: responsive site on mobile- horizontal slop on the iPhone

Thread Tools

Display

responsive site on mobile- horizontal slop on the iPhone

Bookmarks

Bookmarks

Posting Permissions