SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    responsive site on mobile- horizontal slop on the iPhone

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    From what I've researched, try doing this.

    <meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />

    Then add this to your CSS:

    body {
    overflow-x:hidden;
    }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well, I have Opera installed for testing on my computer anyway, so I've picked up this tool .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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%;

    Quote Originally Posted by rickarooni View Post
    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.

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •