I am trying to do media queries for iPhone. However, for some reason the information in the "mobile" div does not show up, the only thing that shows is the background image.
Any help given is appreciated. Thanks in advance.
HTML:
<div id="wrap">
<div id="header">
<p id="placeholder">
full-site<br>coming soon<span>.</span><span>.</span><span>.</span>
</p>
<p id="time">
OPEN DAILY<br>8am – 8pm
</p>
</div>
<div id="main">
<img id="animate" src="assets/daily_web_logo_2.gif" alt="The Daily Roundup">
</div>
</div>
<div id="footer">
<p id="address">hello</p>
<p id="colophon">
MADE WITH LOVE BY
</p>
</div>
<div id="mobile">
<img id="logotype" src="assets/daily_mobile_logo.png" alt="The Daily Roundup">
<p id="time2">
Open Daily 8am to 8pm
</p>
<p id="facebook">
Get The Daily Roundup on Facebook
</p>
<p id="email">
Email us
</p>
<p id="address2">hello</p>
</div>
</body>
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: auto;
}
@font-face{
font-family: "AkkuratPro-Reg";
src: url("type/AkkuratPro-Regular.otf");
}
body{
background-color: #faf2da;
}
a{
text-decoration: none;
color:black;
}
#colophon{
color:black;
}
@media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio : 2){
html, body{
height: auto;
width: auto;
}
body{
background: url(../assets/daily_mobile_background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrap, #footer{
display:none;
}
#logotype{
float:left;
}
#time2, #facebook, #email, #address2{
font-family: "AkkuratPro-Reg", sans-serif;
font-size: 25px;
letter-spacing: 1px;
}
#time2{
padding-top:90px;
}
#facebook, #email{
padding-top:40px;
line-height: 120%;
text-decoration: underline;
}
#address2{
padding-top:40px;
line-height: 120%;
}
}
I see nothing referencing your
#mobile
div at all. Try these.That's from Twitter's Bootstrap, by the way