Entrar Ainda não tem acesso?
1
resposta

Ajuda com responsividade

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Ingrid Lohmann
| 68.5k xp | 3 posts

Olá, estou fazendo um site para treinar as habilidades em html, css e js, porém na parte de responsividade não está funcionando. Quando acesso do celular ou de telas menores as sessões ficam amontoadas, a primeira sessão invade o header, fica horrível. Já tentei de tudo e não consegui...Não sei se é a minha estrutura de html que está errada ou o que mais pode ser.

Segue o link com o repositório do projeto: https://github.com/didzao/site-teste e o link de uma foto de exemplo de como fica em um celular https://ibb.co/whTpq1f

Desde já agradeço a atenção (:

1 resposta
por Rodrigo Vianna Silva
| 91k xp | 29 posts

Dando uma analisada rápida no seu código, parece que o problema é devido ao 'height: 100vh;' aplicado as section. 

#primeira,
#segunda,
#terceira {
    /* height: 100vh; */ <------
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}

Uma dica pessoal minha: tudo no site parece estar muito grande. Tente definir uma altura para essa imagem de banner que está muito grande e envolver todo o conteúdo da <.main> em uma div, colocando um max-width de 1200px centralizando-o ao centro.