Question

Here is how the page is supposed to look like and what it does look like on desktop(chrome,firefox,opera):

And this is how it renders on ipad:

It’s a WordPress child theme(Twenty Eleven) and it’s structure is as usual:

And here is some CSS:

#outer-header{
 width:100%;
 height:56px;
 background-color:#149CC3;
}
#main{
 width:940px;
 margin:0 auto;
 padding:0;
 padding-top:20px;
}
body.home #main{
padding-top:0;
}
#primary,#content{
 margin:0;
}
#primary{
 width:620px;
}
#content{
 width:100%;
}
#secondary{
 margin-right:0;
 width:300px;
border:solid 1px #149CC3;
margin-bottom:20px;
}
.inner-wrapper{
 width:940px;
 margin:0 auto;
}
#inner-footer{
 width:940px;
 background-color:transparent;
margin:0 auto;
}
#colophon{
width:100%;
 background-color:#149CC3;
}

Please let me know what could it be and what else you might need to determine problem cause.

Many thanks

Answer 1

I’ve found the problem:

<meta name="viewport" content="width=device-width">

After I deleted above line everything started to work fine.
Will have to do some reading.

Thanks to everybody, especially those not hitting minus 😉