SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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):
    Code:
    /* 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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.)

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by geronimo171 View Post
    it's picking up on a lot of things like border-radius, box-shadow etc.
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •