DIV width problems in iPad

[Russell]

Hello:

I’m trying to debug layout problem on an iPad. A rotating image on my website here:

http://wholepartnership.com/new/

… causes an excess white margin below when I view this page on iPad. I’ve marked up a screenshot of specific problems here:

http://compoundeyedesign.com/temp/ipad.jpg

If I go to other pages of the site on my iPad, they look fine because they don’t have that rotating image.

Any ideas what might be causing the issue, or a similar thread which I can glean some hints from?

Thanks, Russell

[daffy58]

There is a large gap because of the main image width.

Make the image resize to the max width of the container

img {
    max-width: 100%;
    height: auto;
}

[Ed]

The problem happens because the JavaScript plugin for your carousel (rotating image) specifies a fixed width for its container, and doing so breaks your otherwise responsive layout when viewed on a small screen – the problem is also viewable if you resize your browser window down to roughly iPad size.

If it was me, I’d switch to a different plugin for your carousel.

I would suggest Anythingslider (which is cool because it allows you to navigate through the slides using touch gestures) or Bootstrap Carousel (which you’re already including on the page!). They’re both free, and they both work with responsive layouts.

Alternatively, you could dig around in the documentation for the plugin you already use (Ctrl+F and search for “responsive”), see if you can set it to use width: 100%; instead of an absolute pixel width.

[Author]

Posts