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?
Printable View
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?
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 :-(Quote:
Originally Posted by RichardAskew
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 percentagesQuote:
Originally Posted by XraySierra
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
Put this in the head of your pages:
It forces mobile devices to fit your page into the viewport.Code:<meta name="viewport" content="width=device-width; initial-scale=1.0">
Tried that too. All that did was make things worse.Quote:
Originally Posted by ralph.m
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.Quote:
Originally Posted by XraySierra