My media query functions correctly on my desktop, but not on mobile phones or tablets. Please review the live code here http://jsfiddle.net/E8cgT/
If the screen size is greater than 1024px, it should be green, as it is on my tablet. However, the background remains yellow.
I also encounter the same issue on my cell phone, where the background color stays yellow regardless.
Please see below for the HTML and CSS:
<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>
Solution:
1) I was unaware of the viewport meta tag. Adding this line resolved the issue:
<meta name="viewport" content="width=device-width, initial-scale=1.0">2) I adjusted the order of the styles in the CSS file after applying all case-specific style sheets:
body {
background-color: red;
}
@media screen and (max-width:480px)
{body{background-color: blue;}}
/* Medium resolution for screen between 481 and above */
@media screen and (min-width:481px)
{body{background-color: yellow;}}
/* High resolution for screen between 1024 and above */
@media screen and (min-width:1024px)
{body{background-color: green;}}
Thank you for your assistance.