Estou fazendo um site para um familiar com base nos estudos desse curso. Porém ao tentar deixar ele responsivo para resoluções menores que 375px de largura uma parte branca começa a surgir e ocupar a tela na lateral direita do começo ao final da tela.
algumas coisas até sobrepõem essa parte branca, porém não completamente e tudo como eu gostaria. Tentei muitos metodos já mas não estou achando uma solução.
<exclui o código que estava inserindo (por ser muito grande) e adicionei um repositório no GitHub acima>
Bom dia;
Veja se nenhum elemento tem uma largura fixa maior que 100% da tela. No CSS, tente usar:
max-width: 100%;
overflow-x: hidden;
Use meta viewport corretamente
Se ainda não adicionou isso no seu HTML, inclua esta linha no <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Evite width maior que a tela
Se algum elemento estiver empurrando o layout, use box-sizing: border-box para evitar que margens e paddings aumentem a largura total:
* {
box-sizing: border-box;
}
Verifique elementos flexbox
Se estiver usando display: flex, veja se algum flex-basis, min-width ou margin está forçando um elemento a ultrapassar a tela.
Você pode testar removendo o overflow-x: hidden temporariamente e inspecionando no DevTools (F12 no Chrome) para ver qual elemento está causando o problema.