Website doesn't fit on Ipad and iPhone

Question

This is the website:

The problem is that the screen doesn´t adapts to the viewport (no white margin on the sides when first load) and also makes an strange big white margin right if you zoom out and see the entire page.

I´m using this tag to try to achieve but still doesn´t work too much:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes" />

This is my css:

body {
background-color:#fff;
font-family:'Droid Sans', arial, sans-serif;
color: #777;
width: 100%;
margin:  0;
}
#page {
width: 950px;
margin: 0px auto;
padding:0px;
background-color:#fff;
z-index: 0;
}

any ideas how can I fix it?

Answer 1

What you need is something called CSS media queries. Basically you create different CSS rules for specific screen sizes. For example

@media screen and (max-width: 700px) and (min-width: 520px) {
  body {
    background: red;
  }
}

will set the body background to red color whenever your browser window/screen width is larger than 520px and smaller than 700px.

Try googling for 'CSS media query' and 'responsive design', that'll point you in the right direction

Answer 2

Your issue seems to be your slideshow and the viewport tag:

#slideshow is set to width:1083px; which is causing the whitespace at the right on your site. Change this to 100% and that will fix it. Even though the overflow is set to hidden the element

initial-scale=1.0 is what the size is rending when it initially loads. It's loading at a 1:1 pixel ratio and not scaled down to see the entire page.

width=device-width is setting the width of your page to the width of the device, which on iPhone's Mobile Safari is 320px. If you alter this to something like width=950 that will set the width of the viewport equal to the width of your site, 950px. This will allow the user to scale all the way out and see the entire width of the site. Safari will add whitespace to the bottom of your page.