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??
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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??
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!
Como deixar um espaço aqui??
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:
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!
Muito obrigado !!