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

i need resizing font-size inside of div. when resize browser window changes smaller font.

i can't change html font or body font solution must target h1 inside specific div. i'm opened media query solution or js.
i've tried other similar questions , answers no solution. appreciated. thanks!

this fiddle http://jsfiddle.net/x767knu0/

html:

<div class="sharesmenu">              <h1>jake's shares</h1>    </div> 

css:

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

you calling media queries incorrectly.

you have called only screen wrong way round , missing and join tells browser check more 1 variable.

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

<div class="sharesmenu">    <h1>pepe corse</h1>   </div>

jsfiddle