Site Getting Cutoff on Mobile/Tablets

[XraySierra]

I site I just completed (http://sudburypando.com) looks just fine in my browser. However, when I go on my iPhone or iPad, the right side is cutoff. I've been trying to fix this bug for hours without success. Does anyone know what I'm overlooking?

[RichardAskew]

You have a min-width on your body of 1180px. Even if that wasn't set it would struggle to resize with the wide header image, it won't just shrink with the device. It may be worth looking at Media Queries to style things differently depending on layout- http://www.netmagazine.com/tutorials...queries-part-4

Nice looking site though.

[XraySierra]

You have a min-width on your body of 1180px. Even if that wasn't set it would struggle to resize with the wide header image, it won't just shrink with the device. It may be worth looking at Media Queries to style things differently depending on layout- http://www.netmagazine.com/tutorials...queries-part-4

Nice looking site though.

I added the min-width properly after to try to fix the problem. Didn't work though :-(

[RichardAskew]

I added the min-width properly after to try to fix the problem. Didn't work though :-(

Its these fixed widths that are the problem. The whole site is fixed to this width and so it won't scale with with the browser window, ideally you want to use percentages

If the width on this rule is changed to 77% and the min-width is removed the sections under the banner float nicely:

.homepage {
margin: 0 auto;
width: 1180px; [Change to 77%]
}

html, body {
height: 100%;
min-width: 1180px; [Remove]
}

Please back up before you do anything

[ralph.m]

Put this in the head of your pages:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

It forces mobile devices to fit your page into the viewport.

[XraySierra]

Put this in the head of your pages:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

It forces mobile devices to fit your page into the viewport.

Tried that too. All that did was make things worse.

I can't fix change the width to 77%, because that will only work with the design at a specific resolution. I want it to be 1180px wide.

[RichardAskew]

Tried that too. All that did was make things worse.

I can't fix change the width to 77%, because that will only work with the design at a specific resolution. I want it to be 1180px wide.

But that is what you are doing by specifying the fixed width of 1180px. It won't go any smaller and scale with the browser window.