Responsive heading fonts (h1)

Beste WordPress’ers,

Ik heb een issue en ik krijg het niet opgelost, ik maak gebruik van het WordPress heme Enfold, maar dat staat zeer wss los van het probleem.

Ik heb de H1 op 66px staan, enkel vindt ik dit veel te groot voor op de mobile en tablet views dus wil ik dat die mee schaalt zoals de rest van de de site. Hoe krijg ik dit voor elkaar?

Dit is de desktop view:
http://i.imgur.com/8RiyMNW.png

Dit is de mobile view:
http://i.imgur.com/HqJn5Al.png

En dit is de code die ik momenteel in m’n CSS heb staan (die niet werkt):

@media only screen and (max-width: 480px) { .av-special-heading h1 { font-size: 30px!important; }}

}

@media only screen and (max-width: 480px) { .responsive .container { width: 300px; }}

}

@media only screen and (max-width: 480px) { .entry-content-wrapper .post-title { font-size: 30px!important; }} 

}

h1 { font-size: 66px; }