Content Being Cutoff on Mobile, PLEASE HELP

HTML & CSS
1

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.

2

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

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.

4

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

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.

6

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:


.page-wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -175px 0;
    [COLOR="#FF0000"]min-width: 1180px;[/COLOR]       /* was:  width: 100%; */
    background: #fff url('img/bg.jpg') repeat-x;    /* image is applied twice.  See body */
}

Change Line 273:


.row {
    [COLOR="#FF0000"]margin: 20px 0;[/COLOR]          /* was:  margin: 20px -50px 20px 0; */
    overflow: hidden;
}

Change Line 282:


.col3 {
    width: 360px;
    [COLOR="#FF0000"]margin-left: 50px;[/COLOR]       /* was:  margin-right: 50px; */
    float: left;
}

Change Line 287:


.col4 {
    width: 257px;
    [COLOR="#FF0000"]margin-left: 50px;[/COLOR]       /* was:  margin-right: 50px; */
    float: left;
}

Add:


[COLOR="#FF0000"].col3:first-child {
    margin-left: 0px;
}
.col4:first-child {
    margin-left: 0px;
}[/COLOR]

Change Line 453:


.bottom {
    background: #eaeced;
    [COLOR="#FF0000"]min-width: 1180px;[/COLOR]       /* did not exist */
}

Change Line 479:


.bottom form input[type="submit"] {
    border: 0;
    background: url('img/search.png') no-repeat;
    [COLOR="#FF0000"]display: inline-block;[/COLOR]    /* was:  display: block; */
    width: 99px;
    height: 30px;
    text-align: center;
    font: bold 14px/28px sans-serif;
    color: #fff;
}
7

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.