Grow your CSS skills. Land your dream job.

Problem w/ overflow-x

  • # January 14, 2013 at 5:45 pm

    On [my site](http://smellofpopcorn.com “Smell of Popcorn”) I’m having some problems with the `overflow-x` property.

    If I set the `body` to `hidden`, and the `html` I leave to `visible`, then the site looks great on my Macbook. However, on the iPad, the site is zoomed out all the way like it is not recognizing the `overflow-x: hidden` markup.

    So I tried putting the `html` to hidden, and it works fine on the iPad. But there’s a great big, ugly additional and unecessarly scrollbar always visible on the right when viewed on the laptop.

    What can I do to get the best of both worlds?

    # January 15, 2013 at 9:55 am

    Have you used the viewport metatag?

    # January 15, 2013 at 10:56 am

    I just tried that, and it works fine. Is there a way to “lock” it that way so viewers can’t zoom out?

    Thanks for the help.

    # January 15, 2013 at 10:57 am

    @Diomedes, that’s not recommended for accessibility, but it would be `”maximum-scale=1, minimum-scale=1″`

    # January 15, 2013 at 10:59 am

    I see. Any suggestions on how to make the site look good without creating a headache for readers?

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

You must be logged in to reply to this topic.

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