SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Content Being Cutoff on Mobile, PLEASE HELP

    I've been trying to get this problem fixed for hours, and I just can't seem to figure out what the problem is. When you go to an page on this site (http://sudburypando.com/prosthetics/) all the content is cut-off on any mobile device (iphone, iPad, etc). The site works and looks great on Chrome, FireFox, IE, etc. Any help would be greatly appreciated.
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    It works fine on Windows Mobile, so the problem isn't purely down to mobile devices. Have you tried it on Safari on a PC? (If the problem is only on iGadgets then it might be a Safari issue rather than a mobile issue)

  3. #3
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    It works fine on Windows Mobile, so the problem isn't purely down to mobile devices. Have you tried it on Safari on a PC? (If the problem is only on iGadgets then it might be a Safari issue rather than a mobile issue)
    It seems to work just fine in Safari on my Desktop, but not in my iOS simulator. I have another site that has almost this exact same layout that works just fine, so it must be something simple that I just keep missing.
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by XraySierra View Post
    all the content is cut-off on any mobile device (iphone, iPad, etc).
    Doesn't look cut off to me on iPhone (or on the simulator). What do you mean by "cut off"? The whole page displays fine, albeit the text is small and could be imporved with media queries.

  5. #5
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Doesn't look cut off to me on iPhone (or on the simulator). What do you mean by "cut off"? The whole page displays fine, albeit the text is small and could be imporved with media queries.
    The blue bar that goes across the page, is getting cut off along with the image. The same happens on the footer at the bottom of the page.
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    If you are still having problems with the sudburypando.com page, I have a few changes for you to try. No guarantees, I don't know how to test hand-helds.

    On sudburypando.com:

    Lines 75, 80, 85 need </p> tags at the end of each line.

    On style.css

    Change Line 122:
    Code:
    .page-wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 0 -175px 0;
        min-width: 1180px;       /* was:  width: 100%; */
        background: #fff url('img/bg.jpg') repeat-x;    /* image is applied twice.  See body */
    }
    Change Line 273:
    Code:
    .row {
        margin: 20px 0;          /* was:  margin: 20px -50px 20px 0; */
        overflow: hidden;
    }
    Change Line 282:
    Code:
    .col3 {
        width: 360px;
        margin-left: 50px;       /* was:  margin-right: 50px; */
        float: left;
    }
    Change Line 287:
    Code:
    .col4 {
        width: 257px;
        margin-left: 50px;       /* was:  margin-right: 50px; */
        float: left;
    }
    Add:
    Code:
    .col3:first-child {
        margin-left: 0px;
    }
    .col4:first-child {
        margin-left: 0px;
    }
    Change Line 453:
    Code:
    .bottom {
        background: #eaeced;
        min-width: 1180px;       /* did not exist */
    }
    Change Line 479:
    Code:
    .bottom form input[type="submit"] {
        border: 0;
        background: url('img/search.png') no-repeat;
        display: inline-block;    /* was:  display: block; */
        width: 99px;
        height: 30px;
        text-align: center;
        font: bold 14px/28px sans-serif;
        color: #fff;
    }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As ronpat has identified above it is likely to be the fact that the 100% container becomes smaller than the page content and therefore the background is shortened. You can see the effect on a normal browser if you close the window until a horizontal scrollbar appears and then scroll right to see the hidden content and the background on those 100% elements will be missing.

    You need to always set a min-width on your 100% elements so that they match the largest fixed width element on the page when carrying backgrounds that need to remain in place.

    I don't know how to test hand-helds.
    If you have a mac computer you can get the ipad, iphone simulator from the apple developer sdk which is a pretty good representation of those mobile devices (not just a small window). It's a massive download though as you have to download everything just to get the simulator.


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
  •