title: why won't media query work on mobile and tablet
body: <p>my media query works as per expected on my desktop however not in the mobile phone or the tablet.Please check out the live code here <a href="http://jsfiddle.net/E8cgT/" rel="nofollow">http://jsfiddle.net/E8cgT/</a></p>
  
  <p>if the screen is bigger than 1024px it should be green my tablet screen is but the background stays yellow.</p>
  
  <p>This also happens on my cell phone no matter what is stays yellow.</p>
  
  <p>or read below </p>
  
  <p>my html:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Home Page&lt;/title&gt;
  &lt;link rel="stylesheet" media="all" type="text/css" href="style.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="master"&gt;
  &lt;header&gt;
  &lt;/header&gt;
  
  &lt;nav&gt;
  
  
  Welcome to the home page from the sites directory 
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Meet Your Sensei&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tour Our Dojo&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Our Martial Art Program&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Our Training Schedule&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Current Events&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;/div&gt;&lt;!-- end of the master div tag --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>/* 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 only screen and (max-width:480px)
  {body{background-color: blue;}}
  
  /* High resolution for screen between 1024 and above
  */
  @media only screen and (min-width:1024px)
  {body{background-color: green;}}
  
  /* Medium resolution for screen between 481 and above
  */
  @media only screen and (min-width:481px)
  {body{background-color: yellow;}}
  </code></pre>
  
  <p>[SOLUTION]</p>
  
  <p>1) The view port was something which I did not know about. </p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  
  </code></pre>
  
  <p>2) I changed the priority of the screen after all is casing style sheets.</p>
  
  <pre><code>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;}}
  </code></pre>
  
  <p>Thank you all.</p>