1

Estou criando um site com layout responsivo,quando o site entra na resoluçao mobile sobra um espaço abaixo indesejado

@media(min-width:176px) {
div#rodape{
width: 100%;
height: 70px;
padding-top: 10px;
text-align:center;
}
}

@media(min-width:320px) {
div#rodape{
width: 100%;
height: 230px;
text-align:center;
}
}

/OBS. este site nao é meu isto é apenas um exemplo/

1
  • O CSS na tua pergunta não é suficiente para causar o que aparece na captura de tela. O espaço terá que ser proveniente de alguma falha na markup ou uma definição de CSS que não as que constam na tua pergunta. Deverás atualizar a pergunta com a informação relevante à analise do problema.
    – Zuul
    Commented 23/10/2014 às 8:06

1 Resposta 1

0

Quando usa media queries tem de ter em atênção o minimo e máximo que faz com que o browser escolha uma parte do código ou outra.

Aí vejo que está a defenir min-width nas suas queries, para ambos. Eu sugiro que mude para:

@media(max-width:319px){
    /* ... */
}
@media(min-width:320px){
    /* ... */
}

Assim a fronteira entre um e outro fica defenida e não concorre uma com a outra.

3
  • 1
    As declarações na media @media(min-width:176px) estão sempre em vigor salvo se alteradas na media @media(min-width:320px), ver exemplo. Um text-align:center na primeira não precisa ser declarado na segunda se for para manter o alinhamento ao centro. Mas o problema do OP parece ser uma margem enorme ou um espaço que um elemento antes do #rodape ocupa. De qualquer forma, falta informação na pergunta... por exemplo: de onde vem o fundo preto do rodapé? E se isso está declarado, que outras declarações existem?
    – Zuul
    Commented 23/10/2014 às 8:11
  • 1
    Muito bom @Sérgio li muitos artigos a respeito dos "conflitos" das Media Queries e isso passou despercebido, Agradeço desde já.
    – ndroid
    Commented 23/10/2014 às 20:45
  • @LamborghiniAventador o comentário do Zuul faz muito sentido também, por vezes é util ter min-width em ambos mas consciente que algumas regras do mobile pervalecem no desktop.
    – Sergio
    Commented 23/10/2014 às 20:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .