I've read several books and raticles on Responsive web development and thought I understood it. However, I tried to put the RWD into a site I creating strictly for mobile devices. I hope someone out there can point me in the rightb direction.

I created two stylesheets (1) styles.css that contains the general css calls and a second one to hold the@media checks. The course I took used <a class="banner" href="banner_small.png"></a> as an example to dynamically display an image bassed on the @media located in the responsive.css file.

It looked simple enough, but I guess I didn't understand because the image is not displayed.

I'm using JQM version 1.2.0, HTML5 and CSS3 to develop the website.

Code Snippet from page calling for the top banner:

HTML Code:
<link rel="stylesheet" href="styles/styles.css" />
	<link rel="stylesheet" href="themes/template-1.min.css" />
	<link rel="stylesheet" href="styles/responsiveStyle.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body>
<!-- page -->
<div data-role="page" id="homePage" class="page">
	<!-- calls image from responsive.css -->
	<header><a class="banner" href="#"></a></header>
		
ResponseStyle.css file:

HTML Code:
@charset "utf-8";
/* CSS Document */
/* responsive styles */


// set page to be no larger than 980px and place the results in screen center

.page {
	position: absolute; 
	margin: 0px;
	margin: 0px auto 0px auto; 
	max-width: 980pix;
}

/*
This will ensure that any container having float will stretch according to the
properties witin that container.
*/
.clear_both {clear:both; line-height:1px;}	

/* small screen device is the default and shouldnot need media call */

body { padding: 5px; }
header .banner{
		display: block;
		position: relative;
		height: 175px;
		background-image: url(images/banner_small.png) no-repeat 0px 0px; 
	}


/* medium screen device - pad devices, */
@media screen and (min-width: 501px) and (max-width: 800px) {
body { padding: 10px; }
header .banner
	{
	position: relative;
	display:block;
	position:relative;
	height:175px;
	background: url(images/banner_medium.jpg) no-repeat 0px 0px;
	}
}

/* large sreen device */
@media screen and (min-width: 801px) and (max-width: 980px) {
body { padding: 10px;}
header .banner
	{
	position: relative;
	.page header {
		display:block;
		position:relative;
		height:175px;
		background: url(images/banner_large.jpg) no-repeat 0px 0px;
	}
}
II'm not looking for someone to do the work for me, as I wouldn't learn anything! I simply want someone to show me the error of my ways.

Thank you in advance.