[Dúvida] Minhas sections estão se sobressaindo no responsivo!!

Olá Matheus, tudo bem?

Pelo que entendi, você está tendo problemas com o layout responsivo das suas sections.

Uma dica é verificar se você está utilizando as propriedades CSS corretas para cada tamanho de tela. Além disso, é importante lembrar que as sections podem se sobrepor em telas menores, mas é possível corrigir isso com algumas mudanças no CSS. Por exemplo, você pode definir um tamanho máximo para as sections ou torná-las mais flexíveis.

Outra sugestão é utilizar a propriedade "flexbox" do CSS para organizar melhor o conteúdo dentro das suas sections. Dessa forma, você pode definir a ordem dos elementos e garantir que eles fiquem bem distribuídos em todas as telas.

Mas infelizmente eu não posso ir além disso, pois eu não tenho acesso ao seu CSS completo, muito menos as imagens, links e outros itens desse tipo para poder lhe auxiliar.

Se você puder colocar o seu projeto no ar em plataformas de compartilhamento de projetos como o Github, Code Pen, Replit, ou outras plataformas como essas para que eu possa acessar o seu projeto na totalidade e verificar o problema para que eu possa lhe auxiliar de uma forma muito mais assertiva e direcionada.

Em suma era isso, caso precise eu estarei aqui!

Olá Renan! Agradeço pela ajuda. Vou deixar aqui meu perfil no GitHub. É o único repositório público.

https://github.com/RochaDevs

De antemão, agradeço.

Olá Matheus tudo bem contigo?

Bom vamos lá. Primeiramente parabéns pelo projeto ele está incrível, a paleta de cores é maravilhosa, a estrutura está incrível, enfim, parabéns por isso.

Agora isso tudo é completamente ofuscado quando abrimos a versão mobile, eu percebi que tem um espaço enorme e que atrapalha muito na versão mobile, eu percebi que não só a segunda e terceira section estão se sobrepondo, mas sim quase todas, para resolver isso eu fiz uma espécie de "gambiarra".

Primeiro o que fiz foi colocar todas as 4 seções dentro de uma tag chamada <main>, onde depois no css eu coloquei isso:

main > section {
        padding-bottom: 2rem;
    }

    .terceira__sessao {
        padding-top: 2rem;
    }

O que fiz aqui, eu coloquei um espaçamento na parte inferior de todas as seções, dessa forma elas não vão se sobrepor, esse valores para mim funcionaram bem, mas fique à vontade para trocá-los.

Na terceira seção teve uma imagem que ficou quase para fora da seção, eu achei que ela ficou boa posicionada daquela forma, contudo quando eu comparei com a versão desktop eu percebi que ela estava dentro da seção, então eu coloquei um espaçamento no topo somente da terceira seção para que ela ocupasse a imagem também, mas isso fica por sua conta.

A partir daqui é só algumas dicas que eu vou lhe dar para ajudar você com a responsividade do seu site, mas como não foi isso que você pediu considere como um extra, mas se quiser só pular essa parte fique à vontade.

Se você abrir a versão mobile remover o Zoom do projeto você vai ver um espaço em branco ao lado do site e isso aconteceu pelo tamanho enorme das imagens do seu site, bem como os tamanhos enormes das fontes dos textos, portanto caso deseje consertar isso você pode selecionar os itens que estão muito grandes e diminuir os tamanhos deles.

Por exemplo, a imagem com a classe quarta__menu__imagem pode receber um width de 20%, ou 50% enfim fica por sua escolha. Ah e antes que eu me esqueça, algumas imagens do rodapé estão muito grandes também.

Outro exemplo são as fontes dos textos, e como você está configurando os textos para se adaptarem, pois vi que no lugar de pixels como medida você usou rem e isso é uma ideia bem legal na maioria das vezes quando se fala de acessibilidade.

Ah e só um adendo, tem uma parte do código fora das media queries que está atrapalhando que seria um padding-bottom desnecessário na segunda seção, recomendo que você remova ele, como mostrado abaixo:

.segunda__sessao {
    height: 100vh;
    background-color: var(--cor-terciaria);
    /* padding-bottom: 12.5rem; */
}

E recomendo que você dentro da media querie coloque a segunda seção com o height e o width como auto, isso, pois esse é um dos fatores que está fazendo as seções se sobreporem, algo assim:

.segunda__sessao {
        height: auto;
        width: auto;
    }

Em suma era isso, caso precise eu estarei aqui!

Abraços e bons estudos.