On Fri, May 24, 2013 at 1:01 PM, Jeff Emminger <[email protected]> wrote:
> I've been rolling out responsive layouts for my site, but iPhone is giving
> me trouble. My iPhone 4 reports its portrait resolution as 320 x 480px.
> At this size I'm getting horizontal scrollbars. This also happens in
> Chrome if I resize the browser to these dimensions.
>
> I've spent hours in the Chrome inspector mucking with my widths and margins
> and I can't find where it's coming from.
>
> Site in question: http://quibble.it/
>
> Can anyone help with this?
>
> Thanks,
> Jeff
> __________________________________
Hi Jeff,
I have encountered this a few times. It's a pain.
I see on #hero>.container item you have a fixed width specified of
300px (@max-width 400px). This may be causing a "math" issue where
things inside are adding up to more than 300px.
Also, are you using box-sizing anywhere?
div, header, aside, footer, input, textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
This might help with box-model issues.
And, sadly, i've used overflow:hidden; on the body once or twice due
to crazy time constraints and the inability to spend time tracking the
culprit down.
HTH
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
