Inner Div font Size won't change with media queries when resizing browser window

Question

I need help resizing the font-size inside of a div. So that when I resize the browser window it changes to a smaller font.

I can't change the html font or body font so the solution must target the h1 inside the specific div. I'm opened to a media query solution or even js.
I've tried all other similar questions and answers with no solution. Any help will be greatly appreciated. Thanks!

This is my fiddle http://jsfiddle.net/x767knu0/

HTML:

<div class="sharesmenu">
             <h1>Jake's Shares</h1>  
 </div>

CSS:

@media screen only (max-width:1405px) {
    .sharesmenu h1 { font-size:1em; }
}

@media screen only (min-width: 1406px) {
     .sharesmenu h1  { font-size:2.2em; }
}

Answer 1

You are calling your media queries incorrectly.

You have called only screen the wrong way round and you are also missing the and join which tells the browser to check for more than one variable.

 @media only screen and (max-width: 600px) { .sharesmenu h1 { font-size: 1em; } } @media only screen and (min-width: 601px) { .sharesmenu h1 { font-size: 2.2em; } } 

 <div class="sharesmenu"> <h1>Pepe Corse</h1> </div> 

JSFiddle

Answer 2

Try this in place of your CSS in that fiddle and then resize the browser.:

@media (max-width:1405px) {
    h1 { 
        font-size:1em; 
    }
}

@media (min-width: 1406px) {
    h1 { 
        font-size:2.2em; 
    }
}