Margin/background displaying when loading on iphone - html

Question

I am hoping somebody can help me with a problem I have with my own site.
Basically I am setting up media queries for a site I am working on. However, when displayed on an iphone, or similar device it is displaying a black background or margin, almost like as if there is a div with a width of 1800px or something hidden in the background.
I have tried everything I can think of to sort this out, but I'm having no luck!
I've got the site back down to a simplified version which you can view at www.creekharmonics.uk
CSS for this simplified version is below:
html,body { text-align: center;
margin: 0 auto;
background-color:#000000;
height:100%;
}
#main
{
background-color:#000000;
}
#body
{padding-bottom:500px;}
#wrapper { display: block; width:100%; margin:0px auto; }
#headerbg
{
margin-left: auto;
margin-right: auto;
background-color:#000000;
width:100%;
height:312px;
z-index:999;
}
#headerimg
{
margin-left: auto;
margin-right: auto;
background-image:url(images/header.jpg);
width:358px;
height:312px;
z-index:1000;
}
#font-face {
font-family:bebasneuebold;
src: url(bebasneuebold.otf);
}
#font-face {
font-family:bebasneueregular;
src: url(bebasneueregular.otf);
}
#font-face {
font-family: bebas neue thin;
src: url(bebasneuethin.otf);
}
#delimiter { clear: both; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
#navigation ul {
text-align: center;
display: inline;
margin: 0;
padding: 30px 4px 30px 4px;
list-style: none;
}
#navigation ul li {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
display: inline-block;
margin-right: -4px;
position: relative;
background: #000000;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#navigation ul li a {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
text-decoration:none;
display: inline-block;
margin-right: -4px;
padding: 30px 30px;
}
#navigation ul li:hover {
background: #1b9bff;
color: #fff;
}
#navigation ul li ul {
padding-top:30px;
padding-left:0px;
position: absolute;
top: 56px;
left: 0;
width: 220px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align:center;
}
#navigation ul li ul a{
padding: 30px 67px;
}
#navigation ul li ul li {
background: #1b9bff;
display: block;
color: #fff;
border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#content2
{
display:block
width:100%;
background-color:#000000;
height:auto;
}
#garratt
{
background-color:#000000;
background-image:url(images/jackgarratt.jpg);
background-size:cover;
background-position: center center;
background-repeat:no-repeat;
position:relative;
top:-10px;
left:0px;
width:100%;
height:499px;
margin:0px;
padding:0px;
border-top:10px solid #000000;
display:block;
clear:both;
}
#garrattabout
{
height:300px;
width:914px;
position: relative;
top: 48%;
transform: translateY(-52%);
font-family: bebasneuebold;
font-size:72px;
color:#ffffff;
line-height:20px;
padding:0px;
text-align:center;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#garrattabout h1
{
font-family: bebas neue;
font-size:72px;
color:#00deff;
line-height:55px;
display: inline;
padding:0px;
}
#garrattabout h2
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:90px;
background-color:#000000;
margin-left: auto;
margin-right: auto;
line-height:15px;
font-weight:normal;
padding-top:14px;
padding-bottom:14px;
text-decoration:none;
border:2px solid #ffffff;
}
#garrattabout h3
{
font-family: helvetica;
font-size:16px;
font-weight:normal;
color:#ffffff;
line-height:20px;
padding:0px;
}
#garrattabout p
{
font-family: helvetica;
font-size:18px;
color:#ffffff;
width:850px;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding:0px;
}
#garrattabout a
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:850px;
height:200px;
background-color:#1b9bff;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#garrattabout a:hover
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:850px;
height:200px;
background-color:#0d81db;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#navcentre {
position: relative;
top:0px;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:968px;
z-index:1004;
}
#navcentrewidth {
position: relative;
top:0px;
border-top:1px solid #181818;
border-bottom:1px solid #181818;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:100%;
z-index:1005;
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
html,body { text-align: center;
margin: 0 auto;
background-color:#000000;
height:100%;
width:568px;
overflow:hidden;
}
#main
{
background-color:#000000;
}
#body
{padding-bottom:500px;}
#wrapper { display: block; width:568px; margin:0px auto; }
#headerbg
{
margin:0px auto;
background-color:#000000;
width:568px;
height:312px;
z-index:999;
}
#headerimg
{
margin:0px auto;
background-image:url(images/header.jpg);
width:358px;
height:312px;
z-index:1000;
}
#font-face {
font-family:bebasneuebold;
src: url(bebasneuebold.otf);
}
#font-face {
font-family:bebasneueregular;
src: url(bebasneueregular.otf);
}
#font-face {
font-family: bebas neue thin;
src: url(bebasneuethin.otf);
}
#delimiter { clear: both; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
#navigation ul {
text-align: center;
display: inline;
margin: 0;
padding: 30px 4px 30px 4px;
list-style: none;
}
#navigation ul li {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
display: inline-block;
margin-right: -4px;
position: relative;
background: #000000;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#navigation ul li a {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
text-decoration:none;
display: inline-block;
margin-right: -4px;
padding: 30px 30px;
}
#navigation ul li:hover {
background: #1b9bff;
color: #fff;
}
#navigation ul li ul {
padding-top:30px;
padding-left:0px;
position: absolute;
top: 56px;
left: 0;
width: 220px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align:center;
}
#navigation ul li ul a{
padding: 30px 67px;
}
#navigation ul li ul li {
background: #1b9bff;
display: block;
color: #fff;
border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#content2
{
display:block
width:568px;
background-color:#000000;
height:auto;
}
#garratt
{
background-color:#000000;
background-image:url(images/jackgarratt.jpg);
background-size:cover;
background-position: center center;
background-repeat:no-repeat;
position:relative;
top:-10px;
left:0px;
width:568px;
height:499px;
margin:0px;
padding:0px;
border-top:10px solid #000000;
display:block;
clear:both;
}
#garrattabout
{
height:300px;
width:400px;
position: relative;
top: 48%;
transform: translateY(-52%);
font-family: bebasneuebold;
font-size:40px;
color:#ffffff;
line-height:20px;
padding:0px;
text-align:center;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#garrattabout h1
{
font-family: bebas neue;
font-size:72px;
color:#00deff;
line-height:55px;
display: inline;
padding:0px;
}
#garrattabout h2
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:90px;
background-color:#000000;
margin-left: auto;
margin-right: auto;
line-height:15px;
font-weight:normal;
padding-top:14px;
padding-bottom:14px;
text-decoration:none;
border:2px solid #ffffff;
}
#garrattabout h3
{
font-family: helvetica;
font-size:16px;
font-weight:normal;
color:#ffffff;
line-height:20px;
padding:0px;
}
#garrattabout p
{
font-family: helvetica;
font-size:18px;
color:#ffffff;
width:400px;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding:0px;
}
#garrattabout a
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:400px;
height:200px;
background-color:#1b9bff;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#garrattabout a:hover
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:400px;
height:200px;
background-color:#0d81db;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#navcentre {
position: relative;
top:0px;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:568px;
z-index:1004;
}
#navcentrewidth {
position: relative;
top:0px;
border-top:1px solid #181818;
border-bottom:1px solid #181818;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:568px;
z-index:1005;
}
}
Header HTML is below:
<html>
<head>
<a name="top"></a>
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> </title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '226562807717253',
xfbml : true,
version : 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="wrapper">
<div id="headerbg">
<div id="headerimg">
</div>
</div>
<div id="navcentrewidth">
<div id="navcentre">
<div id="navigation">
<ul><li>Home</li>
<li>News</li>
<li>
Reviews
<ul>
<li>Global</li>
<li>Underground</li>
<li>Gear</li>
<li>Live</li>
</ul>
</li>
<li>
Community
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- .main -->
</div>
Index code is here:
<?php get_header(); ?>
<div id="content2">
<div id="garratt">
<div id="garrattabout">
<h2>Global</h2>
<br/>
Jack Garratt - Phase
<p>Phase takes risks and most of them are pulled off with class and distinction, it’s fun, it’s largely original and it’s one I, nor anybody can claim to know inside out in it’s youth- that time will come. In all, Jack Garratt’s debut is immense, driven, sexy, mad- but most of all, fearless.</p>
<br/>
<p>Read More</p>
</div>
</div>
</div>
This is how it currently loads on an iphone:
iphone image
This is how I want it to load:
without black background
This is the first website I have created from scratch using Wordpress, so it's been a constant learning curve and I am sure there are things I should have done differently, but this is one hurdle I just can't seem to get over!
Any help would be really appreciated.

Answer 1

You can set an appropriate zoom level using a meta tag. Put this into your head:
<meta name="viewport" content="width=586">
This tells the phone to treat the viewport as 586 pixels wide, which matches your content.
More info here https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
And loads more here http://www.quirksmode.org/mobile/metaviewport/