[Dúvida] Não consigo descer a tela, não tem Scroll | HTML e CSS: responsividade com mobile-first

Estou fazendo um projeto frontend na versão mobile mas não consigo descer a tela pra vizualizar o resto do conteúdo. Quando mudo para a versão desktop e rolo pra baixo aparece o conteúdo adicionado, mas na mobile é como se o espaço de tela tivesse um limite. Tentei adicionar algumas configurações que o chatgpt me deu mas não funcionou. Não consigo mandar o código inteiro aqui pois diz que o limite foi ultrapassado, então vou mandar o styles.css e algumas imagens. Na primeira imagem nota-se que não tem o scroll do lado e eu não consigo rolar pra baixo e na segunda imagem, que é a versão desktop, tem o scroll e o conteúdo aparece (ainda não configurei com css). Na terceira imagem no inspecionar perceba que quando eu passo o mouse na tag de imagem aparece uma pequena barra branca bem no final da tela, isso indica que o elemento está ali, mas não está aparecendo.

código styles.css

@import url("header.css");
@import url("banner.css");
@import url("carrossel.css");

:root {
    --cinza-claro: #C7C8CC;
    --cinza-escuro: #373A40;
    --branco: #FFFFFF;
    --verde-bem-escuro: #004339;
    --verde: #008055;
    --verde-claro: #00B276;
    --verde-bem-claro: #75ffd1;
    --fonte-principal: "Poppins";
}

body {
    background-color: var(--cor-de-fundo);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
}

![]( Imagem na versão mobile ) ![]( Imagem na versão desktop ) ![]( Barra branca indicando que o elemento está ali )

Oi, Clara, tudo bem?

Inicialmente, ao visualizar a versão móvel do seu projeto no navegador, para realizar a rolagem da tela, você pode clicar com o mouse em cima da tela e arrastar para cima, da mesma forma que fazemos com nosso dedo ao acessar qualquer aplicação pelo celular. Em tamanhos de tela menores, a barra de rolagem não é exibida na lateral direita como acontece ao utilizarmos as versões de tela para dispositivos maiores como desktops, por exemplo.

Contudo, caso o conteúdo não esteja rolando para baixo realizando o procedimento acima, o problema, pode estar associado à propriedade overflow, responsável pelo scroll da tela. Algumas opções para solucionar essa situação são:

Certificar-se de que o overflow do body e html esteja configurado corretamente para permitir a rolagem.
```
html, body {
    overflow: auto;
}
```
Verificar se nenhum elemento está com a propriedade height configurada com uma altura de tela que possa estar limitando a altura da página.
```
.algum-elemento {
    height: auto; /* ou remova a propriedade height */
}
```
Adicionar um min-height ao body pode garantir que ele sempre tenha pelo menos a altura da viewport.
```
body {
    min-height: 100vh;
}
```
Verificar se nenhum outro elemento está com overflow: hidden; que possa estar impedindo a rolagem.
```
.algum-elemento {
    overflow: visible; /* ou remova a propriedade overflow */
}
```
Adicionar overflow-y: scroll; ao body para forçar a barra de rolagem vertical.
```
body {
    overflow-y: scroll;
}
```

Aqui está um exemplo de como você pode aplicar essas configurações no seu styles.css:

@import url("header.css");
@import url("banner.css");
@import url("carrossel.css");

:root {
    --cinza-claro: #C7C8CC;
    --cinza-escuro: #373A40;
    --branco: #FFFFFF;
    --verde-bem-escuro: #004339;
    --verde: #008055;
    --verde-claro: #00B276;
    --verde-bem-claro: #75ffd1;
    --fonte-principal: "Poppins";
}

html, body {
    overflow: auto;
    min-height: 100vh;
}

body {
    background-color: var(--cor-de-fundo);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
    overflow-y: scroll;
}

Todavia, vale ressaltar que como não tenho acesso ao cenário completo do projeto outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.

Espero que dê tudo certo. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!