Jump to content
Sign in to follow this  
joe_steer

Browser Specific CSS - ipad?

Recommended Posts

joe_steer

Hi Guys, I'm using the Browser Specific CSS plugin, it works great for iphone, but doesn't seem to have any affect on ipad (I'm testing through http://www.ipadpeek.com/ as I don't have an ipad) Any idea what I'm doing wrong? My test site is here: http://tinyurl.com/7rk7dqu The code I'm using in style.css is:

div.headertext
	{
	font-size: 0.8em;
	position:relative;
	top: -28px;
	right: -190px;
	}
	
	/* Set font size and position for iPhone */
	.iphone .headertext{
	position:relative;
	left: 50px;
	font-size: 0.5em;
	}
	
	/* Set font size and position for iPad */
	.ipad .headertext{
	position:relative;
	left: 50px;
	}
	
	div.socialicons
	{
	position:relative;
	top: 85px;
	right: -375px;
	}
	
	/* Set position for iPhone */
	.iphone .socialicons{
	position:relative;
	left: 260px;
	top: 70px;
	}
	
	/* Set position for iPad */
	.ipad .socialicons{
	position:relative;
	left: 260px;
	top: 70px;
	} 

Any help much appreciated. many thanks, Joe.

Share this post


Link to post
Share on other sites
Jenny
Hi Joe. I found this link which you may find helpful. Also, be sure to read the comment from a user who doesn't recommend using ipadpeek since it doesn't always work. ;) http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3891451/iPad-and-iPhone-Development-Using-CSS-Layouts.htm

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Simon
It wont work with that test site Joe, it basically loads your site into a ipad shaped iframe ;) The css plugin still sees the browser as your desktop!

Share this post


Link to post
Share on other sites
joe_steer
Thanks for the link Jenny, I do still find it strange that changing the ipad specific css doesn't alter anything at all in ipadpeek, even if the site isn't 100% accurate. I suppose the only way I can find out is if I find an ipad to test on! If anyone else reading this has any more insight in to this.. (or can look at my site on an ipad).. please let me know. many thanks, Joe.

Share this post


Link to post
Share on other sites
joe_steer
Oh I see, thanks pross. That makes sense! many thanks, Joe.

Share this post


Link to post
Share on other sites
WebWerx
@joe_steer: Try using Adobe Shadow for testing.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×