CSS for mobile is not working

hello, i have been coding css for years now and I am diving into the mobile side of things and am having difficulties. I have read through numerous examples on how to use different style sheets for mobile devices that come to your website but nothing seems to be working. I have a basic HTML index page that has this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>LUC Mobile</title>
<link rel="stylesheet" href="supports/styles/collegesandschools.css" media="screen" />
<link rel="stylesheet" href="supports/styles/mobile.css" media="handheld", only screen and (max-device-width:480px)" />
</head>

<body>
<ul>
<li>About Us</li>
<li>News</li>
<li>Events</li>
<li>Maps</li>
<li>Directory</li>
<li>Library</li>
<li>LOCUS</li>
</ul>


</body>
</html>

My collegesandschools.css looks like this:

@import url("common.css");
@import url("mobile.css") handheld;
@import url("mobile.css") only screen and (max-device-width:480px);

My mobile.css looks like this:


@media handheld
{

html, body{
   font:12px/15px sans-serif;
   background:#fff;
   padding:3px;
   [B]color:blue;[/B]
   margin:0;
}

My common.css looks like this:

@media screen
{

html, body{
   font:12px/15px sans-serif;
   background:#fff;
   padding:3px;
   [B]color:black;[/B]
   margin:0;
}

Basically I am just trying to test to see if the colors change on the text if I am on a desktop vs. my ipad, but it always comes up black. Does anyone know what I am doing wrong, I do apologize for all the code posting I just really need some help. Any help would be most appreciated.

It’s rather simple… very few mobile device supports the handheld media rule (there’s not even enough of them to make it statistically significant). As things go, you should be able to deal with some mobile devices using the media queries (based on available size), however the current case is that most people just build a separate mobile friendly design (and site) because it’s not only easier but has other inherent benefits such as you can scale down images, have smaller files with less scrolling and it will be easier to navigate as a result. Unfortunately, mobile friendly CSS files are like HTML emails, exceptionally hard to produce and erratically supported. :slight_smile: