Website styles lost on iphone - not sure why?

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

Which styles aren’t applying? They may be getting overridden by your main styles, if they are more specific.

You could als try validating your CSS in case there are errors. (I checked the code above and it seemed to be OK, though.)

Thanks for your response.
Well the http://jigsaw.w3.org validator brings up a lot of errors but it’s picking up on a lot of things like border-radius, box-shadow etc. I can’t see anything that would have this effect.

I’d be happy to pm the link if anyone would be willing to check for me?

Thanks

G

Yeah, don’t worry about that. These are CSS3 things, so the CSS2 validator flips its lid over those, but they are unlikely to cause any layout problems. Feel free to PM the link. :slight_smile:

Thanks Ralph for testing this.
Not sure why i can’t get it to work on my phone and no amount of refreshing appears to make any difference:-/
I’ll put it down to a technological quirk.

Cheers.

Hm, yes, for those who don’t know, I tested the PMed link on iPhone 4S and it worked fine, but on iPhone 3 the styles don’t seem to be kicking in properly. I’m not sure if iPhone 3 had a problem with @media rules or not. but I can’t find any discussion online about it.