Hi,
I’ve created a site with some fairly standard media queries but the styles are not being picked up on the iphone.
I checked using http://www.responsinator.com and everything looked great but when i checked on an actual phone a lot of styling isn’t displaying, it just appears to be the resizing of container divs that are having any effect.
Is there any reason why this might be happening?
my media queries are as follows (containing div queries are separate - using Skeleton):
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
nav.primary ul li a {font-size: 12px; max-width: 100px;}
.container .three.columns {width: 160px;}
h1 {font-size: 28px;}
.flexslider .slider-left {float: none;padding: 20px 37px;width: 100%;}
.flexslider .slider-right {float: none; width: 100%; padding: 0 20px;}
.flexslider {margin-bottom: 20px;}
.container .one-third.column {width: 210px;}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
header h1, .header-contact, .flexslider {display: none;}
a.header-facebook, a.header-twitter {width: 160px; margin: 0 auto;}
#logo {margin: 0 auto;float: none;}
.container .one-third.column {margin: 0;}
footer .first-credit p, footer .last-credit p {
text-align: center;
margin-bottom: 7px;
}
footer .first-credit p {padding-top: 20px;}
.band.footer {padding-bottom: 20px;}
nav.primary {
padding: 10px 0;
}
nav.primary select {
display: block;
}
nav.primary ul {
display: none;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
header h1, .header-contact, .flexslider {display: none;}
a.header-facebook, a.header-twitter {width: 160px; margin: 0 auto;}
#logo {margin: 0 auto;float: none;}
.container .one-third.column {margin: 0;}
footer .first-credit p, footer .last-credit p {
text-align: center;
margin-bottom: 7px;
}
footer .first-credit p {padding-top: 20px;}
.band.footer {padding-bottom: 20px;}
nav.primary {
padding: 10px 0;
}
nav.primary select {
display: block;
}
nav.primary ul {
display: none;
}
}
Thanks for any help
G