Can't get @media queries to work in order to resize font on mobile

Question

I've made a simply and fun website a few days ago, but I can't make the text to resize on mobile devices. Here's what I have tried so far:

@media only screen and (min-width:320px)  { .output{font-size:0.5em;} }
@media only screen and (min-width:768px)  { .output{font-size:0.8em;} }
@media only screen and (min-width:1024px) { .output{font-size:1em;} }
@media only screen and (min-width:1900px) { .output{font-size:1.5em;} }

I'm also using:

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

Any idea why this doesn't work?

Answer 1

On looking that sitem it looks like the div actually has an ID of output...not a class

So...

@media only screen and (min-width:320px)  { #output{font-size:0.5em;} }
@media only screen and (min-width:768px)  { #output{font-size:0.8em;} }
@media only screen and (min-width:1024px) { #output{font-size:1em;  } }
@media only screen and (min-width:1900px) { #output{font-size:1.5em;} }

would be correct.