Grow your CSS skills. Land your dream job.

How do I get iPhone to break div’s responsively instead of re-sizing?

  • # May 6, 2013 at 7:05 pm

    Hello everyone,

    I’ve just finished my first fully responsive page today and it all works great when I re-size my screen, (div’s have clear:both so they stack at smaller sizes, etc), but when I look at it on the iPhone it just gets auto scaled and never breaks as I’ve specified in the @media assignments. I’ve added the meta tags disabling scaling, but it seems the iphone just ignores it.

    The site is http://events.dharmata.org. Here’s the CSS:

    @media all and (min-width: 900px) {
    #section {
    float: left;
    margin: 1%; /* 10px ÷ 1000px = .01 */
    width: 38%; /* 320px ÷ 1000px = .440 */
    }
    #aside {
    float: right;
    margin: 1%; /* 10px ÷ 1000px = .01 */
    width: 58%; /* 640px ÷ 1000px = .66 */
    }
    footer {
    clear: both;
    }
    }

    I’m sure this must be easy, but I got a little bit stuck. Thanks for your help!

    Ben

    # May 7, 2013 at 1:04 am

    Is there something different in the way iOS devices treat iframes?

    Just a thought.

    # May 7, 2013 at 8:13 am

    > I’ve added the meta tags disabling scaling

    You might need those on the page with the frames as well, I think. Why do you use frames anyway, I think it’s even invalid with that doctype.

    # May 7, 2013 at 8:59 pm

    It’s funny, the frameset tags seem to be added after the page renders. None of that is in my original code. Where do you think that is being added?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".