FOOTER DA ABA "SOBRE MIM" SUBIU MUITO NA PÁGINA

Oi Guilherme, tudo bem?

Entendo que você está tendo problemas com o posicionamento do rodapé na sua página "Sobre mim". Isso pode estar acontecendo por diversos motivos, mas vou te dar algumas sugestões que podem te ajudar a resolver o problema.

1. Verifique se todos os elementos acima do rodapé estão fechados corretamente. Às vezes, um elemento não fechado pode causar problemas de layout.

2. Verifique se não há nenhum elemento empurrando o rodapé para cima. Isso pode ser causado por margens negativas, por exemplo.

3. Outra possibilidade é que o conteúdo da página "Sobre mim" seja menor do que a altura da janela do navegador, fazendo com que o rodapé suba. Nesse caso, você pode tentar usar o recurso de "sticky footer". Aqui está um exemplo de como implementar isso:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

Nesse exemplo, o display: flex e flex-direction: column fazem com que os elementos filhos do body sejam dispostos em uma coluna. O min-height: 100vh faz com que o body tenha no mínimo a altura da janela do navegador. E o margin-top: auto no rodapé faz com que ele seja empurrado para o fim da página.

Espero que essas sugestões te ajudem a resolver o problema. Lembre-se de testar cada uma delas separadamente para identificar qual resolve o problema.

Um abraço e bons estudos.

Boa noite Lorena, não consegui resolver :.(

Oi Guilherme!

Nesse caso, você poderia mandar seu código completo aqui? Você pode usar a ferramenta de inserir bloco de código </>.

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Um abraço e bons estudos.

Boa noite Lorena, tudo bem?

Eu consegui resolver mas foi de outra maneira.

Fui no meu arquivo CSS e coloquei:

html{ height:100% }

body{ box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); position: relative; height: 100%;

.rodape{ color: var(--cor-primaria); background-color: var(--cor-terciaria); padding: 20px; text-align: center; font-family: var(--fonte-secundaria); font-size: 24px; font-weight: 400; position: absolute; bottom: 0; width:100%;

Ou seja, defini a largura do rodapé, a altura do body (Pois ao inspecionar vi que não estava considerando a tela toda como uma página, por esse motivo acredito que o rodapé tenha subido. Ele subiu para o limite) e coloquei a posição do BODY como relativa e a do rodapé como ABSOLUTA. Logo após fazer isso defini o bottom: 0; para colar ela lá embaixo, no limite mesmo.

Deu certo, mas gostaria de saber se teria outra forma melhor de resolver esse problema.

Oi!

Parabéns! Essa é uma abordagem válida e funciona bem para manter o rodapé sempre na parte inferior da página, independentemente do conteúdo.

Na programação é assim mesmo, existem inúmeras formas para resolver o mesmo problema.

Uma outra maneira é fazendo assim:

Posição Fixa: Outra alternativa é usar uma posição fixa para o rodapé. Isso fará com que o rodapé fique fixo na parte inferior da janela do navegador, independentemente do conteúdo. Aqui está um exemplo:

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--cor-terciaria);
  padding: 20px;
  text-align: center;
  font-family: var(--fonte-secundaria);
  font-size: 24px;
  font-weight: 400;
}

Neste caso, definimos a posição do rodapé como fixed e usamos bottom: 0 para garantir que ele fique sempre na parte inferior da janela.

Você pode ver aqui o exemplo que fiz. Talvez pode precisar mudar algo no seu código para funcionar também.

Mas a sua solução foi muito boa! Parabéns mais uma vez.

Um abraço e bons estudos.

Boa tarde Lorena, primeiramente muito obrigado pelos parabéns rsrs.

Quando cheguei no módulo de responsividade, e upei o código no Vercel, ele apresentou alguns erros tanto na versão pc quando no mobile.

Na versão PC eu consegui resolver analisando o meu código e encontrando meus erros, porém na mobile ainda não consegui.

Acredito que seja por conta desses códigos que usei para tentar arrumar o rodapé, pois ele foi um dos itens que ficou bugado no mobile.

Estarei tentando fazer da forma que você me passou, definindo a posição dele como fixed e retorno com uma resposta se deu certo ou não.

Muito obrigado pela ajuda novamente :D

Boa noite Lorena, fiz a alteração do rodapé como FIXED e funcionou! Porem ele fica tampando a visão do ultimo botão (instagram) , e não sei como resolver.

Os textos também estão quebrando muito antes, queria saber como posso arrumar.

https://github.com/Guialmeiida/First-Project.git

Segue o link do meu projeto no GITHUB e uma imagem de como está ficando.

Eu não consigo prosseguir no curso sem arrumar esse problema, parece que estou ignorando os bugs kkkk preciso resolver isso pra continuar meus estudos.

OBS: Está bugando no celular, mas quando coloco a opção "para computador" o layout se comporta normalmente.

Me ajuda por favooooor

Oi, Guilherme!

Após analisar o seu repositório, podemos fazer algumas correções no seu código CSS. Você vai notar que eu adicionei alturas fixas em alguns elementos, o que vai facilitar na hora de fazer o cálculo da altura do componente main.

Primeiro, vamos começar adicionando uma altura fixa para o header e para o rodapé. Além disso, vamos definir a largura do rodapé de uma maneira diferente.

.cabecalho{
    padding: 2% 0% 0% 15%;
    
    height: 90px; /* altura fixa para o cabeçalho */
    box-sizing: border-box; /* esta propriedade previne que as definições de padding interfiram na altura e largura do componente */
}


.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 20px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
    
    /* position: fixed; */  /* vamos retirar a posição fixa */ 
    width: 100%; /* ao definir a largura desta maneira, não precisaremos definir uma posição para o nosso rodapé */
    height: 70px; /* altura fixa para o rodapé */
    box-sizing: border-box; /* esta propriedade previne que as definições de padding interfiram na altura e largura do componente */
} 

Em seguida, precisaremos alterar o componente main através de sua classe apresentacao. Vamos definir uma altura mínima para este componente, assim, independente do seu conteúdo, o componente se manterá com uma altura mínima, jogando o rodapé para o fim da página.

É neste momento que utilizaremos as alturas fixas definidas para o cabeçalho e para o rodapé.

.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:82px;
    
    min-height: calc(100vh - 160px);
}

Note que estou baseando as correções no seu repositório no github, e algumas alterações que você disse ter feito não estavam disponíveis. Uma delas é a adição de uma altura no body, que ficou da seguinte maneira:

body{
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    min-height: 100%; /* o ideal no caso seria definir uma altura mínima ao invés de uma altura fixa, pois dependendo do conteúdo, a página precisa crescer */
}

Um abraço e bons estudos.

Boa noite Lorena,

Primeiramente obrigado pela ajuda.

Apliquei aqui no código e aparentemente ficou bem melhor! Pelo CTRL+SHIFT+I e entrando no modo MOBILE ficou perfeito.

Amanhã uparei o código atualizado no Vercel pra testar no meu celular e ver se está tudo ok.

Uma única alteração que fiz, foi modificar o height do rodapé de pixels para porcentagem, pois ele não estava pegando a parte de baixo toda, ficou uma bordinha ainda. Quando alterei para porcentagem cobriu certinho.

Inclusive tenho duas perguntas:

Esses valores em pixel que você passou, posso fazer a alteração para porcentagem ou rem? Para que se adeque melhor em diferentes telas? A outra pergunta é se no curso irei aprender o min-height max-height e esses esquemas do width 100%, por exemplo.

Acabei fazendo o teste na ansiedade pra ver se dava certo e pensando que finalmente estava livre pra prosseguir com o curso, mas deu errado de novo kkkk

No pc está certinho, porém no celular está se comportando de maneira errada... O cabeçalho continua sendo "comido" pela tela, e as escritas continuam quebrando muito cedo, fazendo com que forme uma coluna desnecessária, e não uma linha de texto até o limite.

OBS: O rodapé foi resolvido na versão de celular, não está mais tampando o botão do instagram.

Segue imagens:

Oi Guilherme!

Que bom saber que o problema do rodapé foi resolvido. Quanto ao cabeçalho, podemos trabalhar com duas alterações.

A primeira alteração seria no valor do gap, que no momento está fixo em 80px. Você pode testar fazendo essa alteração para porcentagem, por exemplo.

A segunda alteração seria adicionar a propriedade flex-wrap já que no cabecalho__menu você está utilizando o display: flex;.

A propriedade flex-wrap define se, ao chegar no final do container, um elemento deve continuar na mesma linha ou passar para a linha de baixo.

Com essas mudanças, seu CSS da classe .cabecalho__menu geral ficaria da seguinte forma:

.cabecalho__menu{
    display: flex;
    gap: 20%; /* exemplo de gap em porcentagem, você pode escolher o valor que preferir */
}

Já o CSS da classe .cabecalho__menu dentro da media query ficaria o seguinte:

.cabecalho__menu{
    justify-content: space-around;
    flex-wrap: wrap;
}

Quanto às outras perguntas, sim. Alguns cursos mais avançados vão abordar os conceitos de tamanho mínimo e máximo tanto para altura (min-height e max-height) quanto para largura (min-width e max-width). Entretanto, você pode encontrar mais informações nas documentações do W3School, por exemplo.

Espero ter ajudado!

Um abraço e bons estudos.

Boa noite Lorena!

Finalmente consegui alterar algumas propriedades e deu certo!

Alterei somente no @media pois fora da condição que coloquei nele estava abrindo certinho o site (em tela acima de 1200px).

Agora no celular está funcionando do jeitinho que eu estava imaginando hehe

Muito obrigado pela ajuda, vou marcar como solucionado o/