A página é essa:
http://www.dinamicaimoveis.com.br/novo/admin
o css
é esse:
...
media screen and (min-width: 0px) and (max-width:480px) {
.sessoes {
width:100%;
}
.menu {
background:none;
}
.menus {
width:100%;
}
.menusItens {
display:inline;
}
ul.listaTopo {
display:block;
}
ul li.listaLi {
clear:both;
display:inline-block;
}
ul li.listaLi a{
display:inline-block;
}
.final, .base {
width:100%;
font-size:10px;
}
.final {
height:80px;
}
.baseEsquerda, .baseDireita {
width:45%;
}
.finalEsquerda, .finalDireita {
width:95%;
}
}
@media screen and (min-width: 0px) and (max-width:320px) {
.formLogin {
width: 300px;
}
}
@media screen and (min-width: 321px) and (max-width:480px) {
.formLogin {
width: 430px;
}
}
Só esta dando certo o @media
em 320px.
Ou seja, se eu colocar tudo dentro do bloco
media screen and (min-width: 0px) and (max-width:320px) {
}
Tem muita coisa ai que serve tanto para resolução de 320px
quanto para 480px
como por exemplo:
.sessoes {
width:100%;
}
Mas se eu faço
@media screen and (min-width: 0px) and (max-width:480px) {
.sessoes {
width:100%;
}
...
}
@media screen and (min-width: 0px) and (max-width:320px) {
.formLogin {
width: 300px;
}
...
}
@media screen and (min-width: 321px) and (max-width:480px) {
.formLogin {
width: 430px;
}
...
}
Então em qualquer resolução (inclusive a de 320px
que estava funcionando) ele se comporta como se não estiver dentro de um bloco @media
em qualquer resolução.
Onde estou errando?
Observei que o erro só acontece do cabeçalho para baixo.