SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS width issue on iphone

    The page is at msiatlanta.com - You will have to click enter full site when the mobile site comes up.

    Please no bashing or telling me about badly written code. I am trying to fix the site. Just wondering why in an iphone or ipad the container does not open to 100% of the window like I have it set to. It opens only like 95% of the way and there are some things that go over the edge and it doesnt look right on the iphone or ipad. Thanks for any help! It's really appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Your tables are variously set to width="990", width="1000" and width="100%". Perhaps that's confusing the iPhone. I would remove those widths ans set something consistent in the CSS, like

    Code:
    table {width: 100%}
    (though personally, I'd like at least a little margin on each side).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the only thing I see that has the div width is 100%. The 990px are for tables inside which should affect the width of the div named container.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,277
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I only have the iphone and ipad emulators and the ipad seems to look ok. I believe you are supposed to use 980px width for it to be scaled precisely and your tables are 990px so maybe it's the odd 10px getting cut off.

    I believe the iphone scales based on a 960px width so you may need to test out at 960px rather than 990px that you have and make sure that everything fits. I'm not sure why you need to do that when you have a mobile version anyway though.

  5. #5
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'm not sure why you need to do that when you have a mobile version anyway though.
    Because if you want to view it in full mode or if you are on an ipad it still does it. Thanks for your input I'll look into that.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,277
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zeeb4 View Post
    Because if you want to view it in full mode or if you are on an ipad it still does it.
    lol - I suppose that's true


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
  •