0

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; }
}
ChosenJuan
  • 891
  • 3
  • 26
  • 56
  • 1
    `@media screen and ... `OR `@media only screen and ...` – Stickers Apr 09 '15 at 19:34
  • See http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries - basically the CSS you have is invalid. – andyb Apr 09 '15 at 19:38

2 Answers2

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

Stewartside
  • 20,378
  • 12
  • 60
  • 81
  • Great, that solved my problem. Also it turns out I had another copy of the code in my css preventing the font from resizing. Thank you! – ChosenJuan Apr 09 '15 at 20:08
0

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; 
    }
}
iamyojimbo
  • 4,233
  • 6
  • 32
  • 39