Media Queries ignored

Question

I have a slight problem, my css media queries are ignored, or the main css is.

I'm trying to change the value of a size font in media queries, for desktops is 75px and for mobiles (max-width:320px;) is 40px or so. But it doesn't work.

My css media query code is:

/* Smartphones (portrait) ----------- */

@media only screen and (min-width : 320px) {
  h1.site-title {
    color: #fff;
    font-family: 'Open Sans', sans-serif; 
    font-size: 40px; 
    font-weight: 800; 
    line-height: 1em;
  }
}

When I change the font-size value in the media queries css, it changes in the whole page. (Desktop, tablet, etc.)

What I'm doing wrong ? :(

Thank you,

Cheers

PS: the CSS Media Queries is a separate file, added in the html head, and I have this line to:

<meta name="viewport" content="width=device-width">.

Answer 1

make sure your media query is placed AFTER the original declaration:

This will work: EXAMPLE

.test{
    width:500px;
    height:50px;
    background:red;
}

@media (max-width:500px){
.test{
    width:200px;
}
}

This won't work: EXAMPLE

@media (max-width:500px){
.test{
    width:200px;
}
}
.test{
    width:500px;
    height:50px;
    background:red;
}