Media query doesn't work at all

Question

After completing my whole website I was introduced to media queries as a way of making my website responsive. The thing is that even though I found many resources on Media queries and I know what to type they just don't work at all.

I first tried to test a media query in order to see how it works. This is the code:

<style> 
@media screen and (min-width:600px){

#bigfont
{
    font-size: 80px;
    line-height: 79px;
    font-family: dosis, sans-serif;
    font-weight: 300;
}
}
 </style> 

"bigfont" is already a style in css. So when placing a media query it is supposed to bypass the original style and apply the new parameters.

Since my laptop screen's width was larger than 600px I was expecting it to work but it didn't. My goal is to use media queries in order to scale up my content when it comes to a really big screen.

I even changed min to max just in case with no result.

UPDATE :
I forgot to mention that I already have this:

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 1

You need to add a viewport meta element to the head of your HTML page(s) for media queries to take effect. Eg

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

Have you tried with @media all and (min-width:600px){ ? That usually fixed it for me.

If that does not work, try setting the values as !important (overwrites everything so far so you need to keep the !important part for larger screens, as you have min-width , and smaller if you have max-width ).

    #bigfont
{
    font-size: 80px !important;
    line-height: 79px !important;
    font-family: dosis, sans-serif !important;
    font-weight: 300 !important;
}

Answer 3

Mine only worked after I put the media query block after the original code.

So like this:

Main code{
    .whatever{
    }
    #whatever{
    }
}
@mediaquery{
    .whatever{
     }
    #whatever {
    }
}

Answer 4

Put !important tag ie 'font-size: 80px !important;' to apply the new parameters