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?

HTML:

```
 <head>
 <meta name="viewport" content="width=width, initial-scale=1.0;">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Countdown</title>
 <link rel="stylesheet" type="text/css" media="all" href="css/main.css" />
 <script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

 <script type="text/javascript">
     // countdown script
 </script>
 </head>

 <body>
 <div id="content">

     <div id="zasuvka"></div>     //here is my image
     <p id="ele">TITLE</p>       // here is the title

     <div id="odpocet" >
     <div id="prichadza">Remains: </div> <div id="countdown"></div>   //here is shown the countdown
     </div>

     <div id="show" style="display:none">     // div that will show after the countdown
     <a href="#" target="_blank">LINK</a>
     </div>

 </div>
 </body>

```

CSS:

```
 @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;
 }

```

Any suggestions? Thank you.