title: responsive design not working when testing in browser when resizing
body: <p>I am making a very simple website countdown website with one image and 2 lines of text(including the countdown). I want to make it responsible to the device width. When someone  sees this website on mobile or tablet I want the fonts to be smaller. I have used media query. When I want to test it in my PC browser (by resizing the browser window) It is not working. Can anyone tell me what could be wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;head&gt;
   &lt;meta name="viewport" content="width=width, initial-scale=1.0;"&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
   &lt;title&gt;Countdown&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" media="all" href="css/main.css" /&gt;
   &lt;script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'&gt;&lt;/script&gt;
  
   &lt;script type="text/javascript"&gt;
       // countdown script
   &lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
   &lt;div id="content"&gt;
  
       &lt;div id="zasuvka"&gt;&lt;/div&gt;     //here is my image
       &lt;p id="ele"&gt;TITLE&lt;/p&gt;       // here is the title
  
       &lt;div id="odpocet" &gt;
       &lt;div id="prichadza"&gt;Remains: &lt;/div&gt; &lt;div id="countdown"&gt;&lt;/div&gt;   //here is shown the countdown
       &lt;/div&gt;
  
       &lt;div id="show" style="display:none"&gt;     // div that will show after the countdown
       &lt;a href="#" target="_blank"&gt;LINK&lt;/a&gt;
       &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> @media screen and (max-width: 480px) {
  
    #prichadza {
   font-size:24px;
   float:left;
   text-align:center;
   font-family:"sans";
   color:#ffffff;
   padding-top:10px;
   }
  
   #countdown{
   padding-left:10px;
   font-size:24px;
   font-family:"sans";
   color:#a54d14;
   }
   }
  
   body{
   background: -webkit-linear-gradient(#e4cf8e, #fdf7e5); /* For Safari */
   background: -o-linear-gradient(#e4cf8e, #fdf7e5); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#e4cf8e, #fdf7e5); /* For Firefox 3.6 to 15 */
   background: linear-gradient(#e4cf8e, #fdf7e5); /* Standard syntax (must be last) */
   }
  
   @font-face
   {
   font-family: sans;
   src: url(../fonts/OpenSans-Bold.ttf);
   }
  
  
   #content{
   width:100%;
   text-align:center;
   }
  
   #zasuvka {
   width:318px;
   height:303px;
   background:url('../img/zasuvka.png')no-repeat;
   margin:auto;
   margin-top:120px;
   }
  
   #countdown{
   padding-left:10px;
   font-size:44px;
   float:left;
   font-family:"sans";
   color:#a54d14;
   }
  
   #ele {
   font-family:"sans";
   font-size: 48px;
   color:#a54d14;
   margin:0px;
   padding-top:30px;
   }
  
   #prichadza {
   font-size:34px;
   float:left;
   text-align:center;
   font-family:"sans";
   color:#a54d14;
   padding-top:10px;
   }
  
   #odpocet {
   width:600px;
   padding-left:95px;
   margin:auto;
   }
  
   #show a {
   font-size:44px;
   text-align:center;
   font-family:"sans";
   color:#a54d14;
   }
  </code></pre>
  
  <p>Any suggestions? Thank you.     </p>