Container width on iPad

[rjmccollam]

I am struggling with how this site I am working on (http://alcom.wedodev.com/secure/) is displaying on the iPad.

The issue you can see when viewing the site where most of the site only takes up 70% of the screen. I have combed through my code, and I am just missing it.

I have played with different viewport content values like initial-scale=1 and maximum-scale=1 , but I cannot find what is causing the main container around the different sections of the site to be so squished.

[Paulie_D]

Are you using media queries to adapt the width at different viewport sizes?

I can see that the container has a quite large fixed width.

[rjmccollam]

I am using media queries at a breakpoint of 480px for mobile phones. When troubleshooting I applied some different styles at a 800px breakpoint, but could not find anything that was causing the weirdness.

I have a feeling that it might have to be an issue with my viewport being set to device-width, but am worried about setting a fixed width since that will mess with the breakpoint styles at 480px.

[Paulie_D]

If you do not have a MQ for iPads (or at least tablets) then It seems likely that this is the issue.

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

[TheDoc]

There are many things causing this to happen:

.container {
    width: 973px;
}

.footer .footer-top form {
    left: 164px;
}

.testimonials .container {
    width: 810px;
}

If I remove all of those things, the site no longer has a horizontal scrollbar on desktop which means it won’t look like it’s cut off on the iPad, either.

[Author]

Posts