SO http://is.gd/iX3U7b

HTML

<html>

<head>
<title>Home Page</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
</head>


<body>
<div id="master">

<header>

</header>


<nav>


	Welcome to the home page from the sites directory 

<ul>
<li><a href="#">Meet Your Sensei</a></li>
<li><a href="#">Tour Our Dojo</a></li>
<li><a href="#">Our Martial Art Program</a></li>
<li><a href="#">Our Training Schedule</a></li>
<li><a href="#">Current Events</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>









</div><!-- end of the master div tag -->



</body>


</html>

CSS

/* jsFiddle only hack to force viewpoint meta tag. Add meta tag to your page head*/

</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>


/* this will not work as we have below media to over ride */
body{
	background-color: red;
}


/* Low resolution for cell phones for 480 and below
*/
@media screen and (max-width:480px){
	body
	{
		background-color: blue;
	}
	
}

/* Medium resolution for screen between 481 and above
*/
@media screen and (min-width:481px) and (max-width:1023px){
	body
	{
		background-color: green;
	}
	
}


/* High resolution for screen between 1024 and above
*/
@media screen and (min-width:1024px) and (min-width:1024px){
	body
	{
		background-color: green;
	}
	
}