3
respostas

Dúvida sobre layout no mobile.

Estou adaptando meu site pelo @media screen and()

Porém, em apenas 2 das 3 páginas que montei, fica um espaçamento branco na parte inferior ao meu rodapé, já olhei meus códigos e não encontrei nada.

Como podem observar no print, também tentei ver o elemento pelo DevTools mas não indica por lá.

Também estarei disponibilizando o link para meu repositório, para caso queiram ver o código completo: https://github.com/MasterKelwin/Front-End/tree/main/HTML5%20e%20CSS3%20parte%204%20Avan%C3%A7ando%20no%20CSS

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Fala Kelwin,

Basicamente você precisaria substituir os valores fixos por valores relativos, para que os elementos não ultrapassem o tamanho da tela.

Por exemplo, ao invés de fazer assim:

form {
    width: 930px;
}

Você pode fazer assim:

form {
    width: 100%;
    max-width: 930px;
}

Isso aqui é só um teste, coloque no seu código pra ver o que acontece:

* {max-width:100%; }

Olá!

Mas o valor width não seria relativo a largura?

O meu problema está na altura.

Mesmo assim fiz as substituições do width e o problema persistiu.

Sim, o width é relativo a largura e eu realmente não sei o porquê do navegador criar uma área em branco no rodapé, mas como os elementos estão ultrapassando a área visível, provavelmente ele tenta reduzir todo o container.

Você verificou se tem mais algum elemento ultrapassando a largura da tela?

Poderia mandar um novo print?

Como foi o teste com o * {max-width:100%; }?