Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Footer flutuando projeto portfolio

Bom dia, quando estou testando através "Go Live" do Vscode o footer está normal, quando subi o projeto ele ficou flutuando.

Alguém me ajuda??

https://portfolio-phi-three-57.vercel.app/curriculo.html.

4 respostas
solução!

Olá Bruno!

Esse tipo de problema geralmente está relacionado ao layout responsivo do seu site. O footer pode estar flutuando porque não está sendo definido corretamente em relação ao restante do conteúdo da página.

Uma solução para esse problema é utilizar media queries no seu CSS para ajustar o posicionamento do footer em diferentes tamanhos de tela. Por exemplo, você pode definir uma largura mínima para o footer e aplicar um posicionamento fixo ou absoluto quando a tela for maior do que essa largura.

Aqui está um exemplo de como você pode fazer isso:

@media screen and (min-width: 1800px) {
    .rodape{
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
   }
 }

Nesse exemplo, o footer será fixado na parte inferior da página quando a largura da tela for maior ou igual a 1800 pixels. Você pode ajustar esse valor de acordo com as necessidades do seu projeto.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

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

Como deixar um espaço aqui??

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá Luan!

Me parece que você editou o tópico e alterou o erro, certo?

Analisando o link do seu site, o rodapé está normal, mas em telas maiores há um pequeno espaço entre o final da tela e o rodapé. Isso ocorre porque as divs superiores não são grandes o suficiente para levar o rodapé até o final da tela. Por isso, sugeri fixá-lo no final da tela, mas com o conteúdo se alongando, o rodapé pode acabar cobrindo-o. Notei que você não optou por essa opção.

Sendo assim você pode tentar em "empurrar" o seu conteúdo adicionando uma margem a ele, seu código da class footer fica assim:

.rodape{
    color: var(--cor--primaria);
    background-color: var(--cor--terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fonte--secundaria);
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 3%; /* Nova linha adicionada */
}

Deste modo o seu portifólio deve ficar melhor alinhado:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

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

Muito obrigado !!