media query not working properly on smart phone - css

Question

I'm having an issue with a site I'm building.
When I use a debugger with the dimensions of my phone, everything looks great and works as it should.
When I go to the site with my smart phone, however, I just see a black, empty page...
What's going wrong?
Thanks!
http://holymothership.be/
CSS
body {
font-family:"Karla", Helvetica, Arial, sans-serif;
font-size:20px;
font-weight: 400;
color: #ffffff;
overflow: hidden;
cursor: default;
background-color: #000;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center; /* OLD… */
-ms-flex-align: center; /* You know the drill now… */
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
height: 100%;
width: 100%; /* needed for Firefox */
}
h1,h2,h3,h4,h5,h6,p {
/*line-height: 7vh;*/
}
h1 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: block;
}
h2 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
h3 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
a {
cursor: hand;
color: #fff;
text-decoration: none;
}
b {
font-weight: bold;
}
a:hover {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 1px;
text-decoration: none;
}
.underline {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 2px;
text-decoration: none;
}
a.footer:hover{
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.2vh;
border-bottom-color: #fff;
padding-bottom: 0px;
text-decoration: none;
}
#work {
background-position: center center;
background-repeat: no-repeat;
background-image:url("../cover.png");
position:absolute;
left:0;
top:0;
/*background-size: contain;*/
height:600px;
width:600px;
margin: -100px;
z-index: 1;
cursor: pointer;
}
#overlay {
background-color: #000;
box-shadow: 0 0 100px #ffffff;
z-index: 9999;
position: relative;
width: 1000px;
height: 700px;
display: -webkit-box; display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center; -moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
}
#header {
width:auto;
font-weight: 400;
font-family:"Karla", Helvetica, Arial, sans-serif;
color: #FFF;
position: absolute;
top: 25px;
left: 25px;
}
#footer {
width:auto;
position: absolute;
bottom:25px;
left:25px;
right:25px;
padding-bottom: -4px;
}
#links {
float:left;
position: relative;
}
#contact {
float:left;
padding-left:80px;
position: relative;
}
#secret {
color: #000;
float:right;
position:relative;
}
#logo {
position: absolute;
margin-left: -200px;
margin-top: -135px;
top: 50%;
left: 50%;
width: 400px;
height: 270px;
background-image: url("../logo.svg");
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
#logo1 {
float: right;
position: absolute;
width:150px;
height: auto;
bottom:25px;
right:25px;
padding-bottom: -4px;
}
#logo2 {
display: none;
}
a.secret:hover{
cursor:hand;
text-shadow: 0 0 10px #ffffff;
text-decoration: none;
border-bottom-style: none;
}
#font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?63082030');
src: url('../font/fontello.eot?63082030#iefix') format('embedded-opentype'),
url('../font/fontello.woff?63082030') format('woff'),
url('../font/fontello.ttf?63082030') format('truetype'),
url('../font/fontello.svg?63082030#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?63082030#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
zoom: 0.8;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .6em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-twitter:before { content: '\e800'; } /* '' */
.icon-phone:before { content: '\e801'; } /* '' */
.icon-location:before { content: '\e802'; } /* '' */
.icon-mail:before { content: '\e803'; } /* '' */
.icon-facebook:before { content: '\e804'; } /* '' */
.icon-copy:before { content: '\e805'; } /* '' */
#font-face {
font-family: 'Avara'; /*a name to be used later*/
src: url('../font/Avara.ttf'); /*URL to font*/
}
#media only screen and (max-width: 1100px) , screen and (max-height: 840px) {
#overlay{
width: 800px;
height: 560px;
}
h1 {
font-size: 1.45em;
}
#footer {
font-size:0.8em;
}
#contact {
padding-left:60px;
}
#logo {
position: absolute;
margin-left: -150px;
margin-top: -102px;
top: 50%;
left: 50%;
width: 300px;
height: 204px;
}
#logo1 {
width: 120px;
}
#media only screen and (max-width: 920px) , screen and (max-height: 700px) {
#overlay{
width: 600px;
height: 420px;
}
h1 {
font-size: 1.06em;
}
#footer {
font-size:0.8em;
}
#contact {
padding-left:40px;
}
#logo {
position: absolute;
margin-left: -100px;
margin-top: -68px;
top: 50%;
left: 50%;
width: 200px;
height: 136px;
}
#logo1 {
width: 100px;
}
#media only screen and (max-device-width: 460px) and (orientation: portrait) {
#overlay{
width: 220px;
height: 380px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
font-size: 1.0em;
display: block;
}
h3 {
display: none;
}
#footer {
font-size:0.37em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left:10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 80px;
height: auto;
display: block;
margin-top: 265px;
left: 10px;
position: absolute;
}
#media only screen and (max-device-width: 640px) and (orientation: landscape) {
#overlay{
width: 380px;
height: 220px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
display: none;
}
h3 {
font-size: 1.0em;
display: block;
}
#footer {
font-size:0.6em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left:10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 60px;
height: auto;
display: block;
left: 310px;
bottom: 10px;
position: fixed;
float: right;
}
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Holy Mothership</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="description" content="Holy Mothership is a multidisciplinary design collective based in Antwerp, Belgium."/>
<meta name="author" content="Holy Mothership"/>
<meta name="keywords" content="Holy Mothership, graphic design, studio, antwerp, collective, print, webdesign, copy, illustration"/>
<!-- open graph -->
<meta property="og:title" content="Holy Mothership"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://holymothership.be"/>
<meta property="og:image" content="http://holymothership.be/logo-s.jpeg"/>
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:description" content="Holy Mothership is a multidisciplinary design collective based in Antwerp, Belgium.
It was founded by Tom Anthoni, Benny Arts, Christophe Clarijs, Elias Derboven and Ellen Pollard."/>
<meta property="fb:admins" content="1514858388765304"/>
<!-- end of open graph -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="JavaScript" src="js/script.js"></script>
<script language="JavaScript" src="js/jquery.js"></script>
<script language="JavaScript" src="js/matchmedia.js"></script>
<script language="JavaScript" src="js/analytics.js"></script>
<link href='http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://holymothership.be/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://holymothership.be/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://holymothership.be/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://holymothership.be/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://holymothership.be/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://holymothership.be/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="http://holymothership.be/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://holymothership.be/favicon/favicon-16x16.png" sizes="16x16" />
<meta name="application-name" content="Holy Mothership"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="http://holymothership.be/favicon/mstile-144x144.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="work"></div>
<div id="logo"></div>
<div id="overlay">
<div id="header">
<h1><b>Holy Mothership</b> is a multidisciplinary design collective<br>
founded by Tom Anthoni, Benny Arts,<br>
Christophe Clarijs,
Elias Derboven and Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h1>
<h2><b>Holy Mothership</b> is<br>
a multidisciplinary<br>
design collective<br>
founded by<br>
Christophe Clarijs,<br>
Benny Arts,<br>
Elias Derboven,<br>
Tom Anthoni and<br>
Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h2>
<h3><b>Holy Mothership</b> is a multidisciplinary<br>
design collective founded by<br>
Tom Anthoni, Benny Arts, Ellen Pollard,<br>
Christophe Clarijs and Elias Derboven.<br>
Our studio is located in Antwerp, Belgium.</h3>
</div>
<div id="footer">
<div id="links">
<ic class="icon-twitter"></ic>twitter <br>
<ic class="icon-facebook"></ic>facebook <br>
<ic class="icon-copy"></ic>2014
</div>
<div id="contact">
<ic class="icon-location"></ic>Marialei 29, 2018 Antwerp, Belgium<br>
<ic class="icon-mail"></ic>contact#holymothership.be<br>
<ic class="icon-phone"></ic>[phone]
</div>
</div>
<div id="logo1">
<img src="logo1.svg">
</div>
<div id="logo2">
<img src="logo2.svg">
</div>
</div>
<div id="footer">
<div id="secret"><br><br>
The Landing of…
</div>
</div>
</body>
</html>

Answer 1

I edited your JSFiddle - http://jsfiddle.net/xdm6or92/ and I added two media queries for iPhone portrait and landscape mode. It's hard to test responsive page using JSFiddle, so I uploaded working example on my private server. This way you can enter page from your iPhone or other smartphone and see if it's working. Link - http://mikemoney.nazwa.pl/holymothership/.
Media queries for iPhone
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 460px) and (orientation: portrait) {
.iphone-portrait {
display: block;
}
}
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 640px) and (orientation: landscape) {
#overlay {
width: 500px;
height: 460px;
}
.iphone-landscape {
display: block;
color:blue;
}
}
Full working example [code] http://mikemoney.nazwa.pl/holymothership/.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
font-family:"Karla", Helvetica, Arial, sans-serif;
font-size:20px;
font-weight: 400;
color: #ffffff;
overflow: hidden;
cursor: default;
background-color: #000;
display: -webkit-box;
/* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;
/* OLD: Firefox (buggy) */
display: -ms-flexbox;
/* MID: IE 10 */
display: -webkit-flex;
/* NEW, Chrome 21–28, Safari 6.1+ */
display: flex;
/* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
/* OLD… */
-ms-flex-align: center;
/* You know the drill now… */
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
height: 100%;
width: 100%;
/* needed for Firefox */
}
h1, h2, h3, h4, h5, h6, p {
/*line-height: 7vh;*/
}
h1 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: block;
}
h2 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
h3 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
a {
cursor: hand;
color: #fff;
text-decoration: none;
}
b {
font-weight: bold;
}
a:hover {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 1px;
text-decoration: none;
}
.underline {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 2px;
text-decoration: none;
}
a.footer:hover {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.2vh;
border-bottom-color: #fff;
padding-bottom: 0px;
text-decoration: none;
}
#work {
background-position: center center;
background-repeat: no-repeat;
background-image:url("../cover.png");
position:absolute;
left:0;
top:0;
/*background-size: contain;*/
height:600px;
width:600px;
margin: -100px;
z-index: 1;
cursor: pointer;
}
#overlay {
background-color: #000;
box-shadow: 0 0 100px #ffffff;
z-index: 9999;
position: relative;
width: 1000px;
height: 700px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
/* IE 9 */
-webkit-transform: rotate(-5deg);
/* Chrome, Safari, Opera */
}
#header {
width:auto;
font-weight: 400;
font-family:"Karla", Helvetica, Arial, sans-serif;
color: #FFF;
position: absolute;
top: 25px;
left: 25px;
}
#footer {
width:auto;
position: absolute;
bottom:25px;
left:25px;
right:25px;
padding-bottom: -4px;
}
#links {
float:left;
position: relative;
}
#contact {
float:left;
padding-left:80px;
position: relative;
}
#secret {
color: #000;
float:right;
position:relative;
}
#logo {
position: absolute;
margin-left: -200px;
margin-top: -135px;
top: 50%;
left: 50%;
width: 400px;
height: 270px;
background-image: url("../logo.svg");
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
#logo1 {
float: right;
position: absolute;
width:150px;
height: auto;
bottom:25px;
right:25px;
padding-bottom: -4px;
}
#logo2 {
display: none;
}
a.secret:hover {
cursor:hand;
text-shadow: 0 0 10px #ffffff;
text-decoration: none;
border-bottom-style: none;
}
#font-face {
font-family:'fontello';
src: url('../font/fontello.eot?63082030');
src: url('../font/fontello.eot?63082030#iefix') format('embedded-opentype'), url('../font/fontello.woff?63082030') format('woff'), url('../font/fontello.ttf?63082030') format('truetype'), url('../font/fontello.svg?63082030#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?63082030#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"fontello";
font-style: normal;
font-weight: normal;
speak: none;
zoom: 0.8;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .6em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-twitter:before {
content:'\e800';
}
/* '' */
.icon-phone:before {
content:'\e801';
}
/* '' */
.icon-location:before {
content:'\e802';
}
/* '' */
.icon-mail:before {
content:'\e803';
}
/* '' */
.icon-facebook:before {
content:'\e804';
}
/* '' */
.icon-copy:before {
content:'\e805';
}
/* '' */
#font-face {
font-family:'Avara';
/*a name to be used later*/
src: url('../font/Avara.ttf');
/*URL to font*/
}
.iphone-portrait, .iphone-landscape {
display: none;
color: red;
}
#media only screen and (max-device-width: 1100px), screen and (max-device-height: 840px) {
#overlay {
width: 800px;
height: 560px;
}
h1 {
font-size: 1.45em;
}
#footer {
font-size: 0.8em;
}
#contact {
padding-left: 60px;
}
#logo {
position: absolute;
margin-left: -150px;
margin-top: -102px;
top: 50%;
left: 50%;
width: 300px;
height: 204px;
}
#logo1 {
width: 120px;
}
}
#media only screen and (max-device-width: 920px), screen and (max-device-height: 700px) {
#overlay {
width: 600px;
height: 420px;
}
h1 {
font-size: 1.06em;
}
#footer {
font-size: 0.8em;
}
#contact {
padding-left: 40px;
}
#logo {
position: absolute;
margin-left: -100px;
margin-top: -68px;
top: 50%;
left: 50%;
width: 200px;
height: 136px;
}
#logo1 {
width: 100px;
}
}
#media only screen and (max-device-width: 700px), only screen and (max-device-height: 530px) {
#overlay {
width: 220px;
height: 380px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
font-size: 1.0em;
display: block;
}
h3 {
display: none;
}
#footer {
font-size: 0.37em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left: 10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 80px;
height: auto;
display: block;
margin-top: 265px;
left: 10px;
position: absolute;
}
}
#media only screen and (max-device-height: 460px) {
#overlay {
width: 380px;
height: 220px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
display: none;
}
h3 {
font-size: 1.0em;
display: block;
}
#footer {
font-size: 0.6em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left: 10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 60px;
height: auto;
display: block;
left: 310px;
bottom: 10px;
position: fixed;
float: right;
}
}
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 460px) and (orientation: portrait) {
.iphone-portrait {
display: block;
}
}
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 640px) and (orientation: landscape) {
#overlay {
width: 500px;
height: 460px;
}
.iphone-landscape {
display: block;
color:blue;
}
}
</style>
</head>
<body>
<div id="work"></div>
<div id="logo"></div>
<div id="overlay">
<div id="header">
<h1><b>Holy Mothership</b> is a multidisciplinary design collective<br>
founded by Tom Anthoni, Benny Arts,<br>
Christophe Clarijs,
Elias Derboven and Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h1>
<h2><b>Holy Mothership</b> is<br>
a multidisciplinary<br>
design collective<br>
founded by<br>
Christophe Clarijs,<br>
Benny Arts,<br>
Elias Derboven,<br>
Tom Anthoni and<br>
Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h2>
<h3><b>Holy Mothership</b> is a multidisciplinary<br>
design collective founded by<br>
Tom Anthoni, Benny Arts, Ellen Pollard,<br>
Christophe Clarijs and Elias Derboven.<br>
Our studio is located in Antwerp, Belgium.</h3>
<div class="iphone-portrait">It's portrait mode</div>
<div class="iphone-landscape">It's landscape mode</div>
</div>
<div id="footer">
<div id="links">
<ic class="icon-twitter"></ic>twitter
<br>
<ic class="icon-facebook"></ic>facebook
<br>
<ic class="icon-copy"></ic>2014</div>
<div id="contact">
<ic class="icon-location"></ic>Marialei 29, 2018 Antwerp, Belgium
<br>
<ic class="icon-mail"></ic>contact#holymothership.be
<br>
<ic class="icon-phone"></ic>[phone]</div>
</div>
</div>
<div id="footer">
<div id="secret">
<br>
<br> The Landing of…
</div>
</div>
</body>
</html>