Ciao, ho un problema con la visualizzazione di questo sito: http://www.wecastudio.it su dispositivi mobili.

La prima immagine che vedete, sulla quale è stato fatta un replacement da testo h1, non risulta responsive ne su tablet ne su cellulare.

Il codice html è il seguente:

<div class="v-content">
<div class="container">
<h1 class>ciao</h1>
</div>
</div>

il css invece è questo:

h1 {
letter-spacing: 3px;
font-size: 10em;
color: transparent;
background: url(../images/logo.jpg) no-repeat center;
max-width: 100%;
height: auto;
display: block;
overflow: hidden;
}
@media (max-width: 100%) {
h1 {
font-size: 3em;
}
}

sui browser da notebook e pc desktop funziona benissimo ma su cellulare e tablet no. Le ho provate tutte (impostando @media max-width anche a 200px) ma non riesco a capire dove sbaglio.

Grazie in anticipo per una cortese risposta.

Fabio