Css con media query - i contenuti non si ridimensionano

[gdelciondolo]

Ciao a tutti! Ho creato una pagina "Work in Progress" con l'intento di renderla responsive... quindi ho elaborato un codice css utilizzando le media query ma il contenuto non si ridimensiona... o meglio, se provo a ridimensionare la finestra del browser da computer, la pagina si ridimensiona correttamente in base alle dimensioni min e max che ho impostato nel css MA se visito la pagina con uno smartphone sembra che il css non agisca...

questo è il link della pagina in questione

di seguito vi riporto il CSS:

@media only screen and (min-width: 1025px) {
body {  
    background-image: url("http://www.quinteaquadri.love/images/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
}
#contenitore {
background-image: url("http://www.quinteaquadri.love/images/logo2.png");
    background-position: 91% 96%;
    background-repeat: no-repeat;
    background-size: 26% auto;
    height: 600px; 
    width: 100%;


}


}




@media only screen and (min-width: 779px) and (max-width: 1020px) {
body {  
    background-image: url("http://www.quinteaquadri.love/images/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
}
#contenitore {
background-image: url("http://www.quinteaquadri.love/images/logo2.png");
    background-position: 91% 96%;
    background-repeat: no-repeat;
    background-size: 37% auto;
    height: 500px; 
    width: 100%;


}




}




@media only screen and (min-width: 481px) and (max-width: 778px) {
body {  
    background-image: url("http://www.quinteaquadri.love/images/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
}
#contenitore {
background-image: url("http://www.quinteaquadri.love/images/logo3.png");
    background-position: 55% 50%;
    background-repeat: no-repeat;
    background-size: 50% auto;
    height: 500px;
    width: 100%;


}




}






@media only screen and (min-width: 320px) and (max-width: 480px) {
body {  
    background-image: url("http://www.quinteaquadri.love/images/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover; 
}
#contenitore {
background-image: url("http://www.quinteaquadri.love/images/logo3.png");
    background-position: center 26%;
    background-repeat: no-repeat;
    background-size: 75% auto;
    height: 400px;
    width: 100%;


}


@media only screen and (min-width: 240px) and (max-width: 319px) {
body {  
    background-image: url("http://www.quinteaquadri.love/images/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover; 
}
#contenitore {
background-image: url("http://www.quinteaquadri.love/images/logo3.png");
    background-position: center 26%;
    background-repeat: no-repeat;
    background-size: 75% auto;
    height: 400px;
    width: 100%;


}




}




}

nono so dove ho sbagliato... e non so più dove sbattere la testa... qualcuno mi può aiutare?!

Ciaoo a tuttiii!!!

[gdelciondolo]

Ciao,

Hai già impostato il tag "viewport?" potrebbe essere la tua soluzione, in questo link trovi tutte le info di cui hai bisogno : Impostare tag "viewport"

Buona giornata

Risolto!! Grazie mille SamT0!!!
Buona giornata anche a te!!