[Dúvida] Posição do rodapé | HTML e CSS: cabeçalho, footer e variáveis CSS | Alura - Cursos online de tecnologia

2
respostas

por RYAN MARK FREITAS CARDOSO

| 20.4k xp | 9 posts

Alguém sabe fazer o rodapé permanecer fixo na parte de baixo da minha tela caso o zoom seja alterado?

Estou trabalhando com o zoom do navegador em 100%, porém, quando eu altero esta proporção para um valor menor o rodapé vai se deslocando para o centro da minha tela.

.rodape {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: #000000;
    background-color: #22D4FD;
    padding: 23.64px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
}

Cheguei a configurar desta forma, mas o rodapé fica sempre na tela, e não é bem isso que eu queria.

2 respostas

por Salomão Cabral Lima

| 42.8k xp | 9 posts

29/09/2023

O problema pode estar no seu html. Como ele está lá?

por RYAN MARK FREITAS CARDOSO

| 20.4k xp | 9 posts

29/09/2023

Está desta forma, Salomão:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">

        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
        </nav>

    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Estudo de programação com foco em
            <strong class="titulo-destaque">backend de qualidade na Alura!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou <span class="apresentacao__conteudo__texto__nome">Ryan Mark</span>, aluno da Alura. Estou aprendendo a programar para conseguir desenvolver algo que possa ajudar o mundo no futuro. Vamos comigo nessa?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links_link" href="https://Github.com/rafaballerini">
                    <img src="./assets/github.png" alt="Imagem do Github">
                    Github
                </a>
                <a class="apresentacao__links_link" href="https://Linkedin.com/in/rafaellaballerini">
                    <img src="./assets/linkedin.png" alt="Imagem do Github">
                    Linkedin    
                </a>
                <a class="apresentacao__links_link" href="https://twitch.tv/guilimadev">
                    <img src="./assets/twitch.png" alt="Imagem do Github">
                    Twitch
                </a>
                
            </div>
        </section> 
        <img src="./assets/joana_img.png" alt="Foto da Joana Programando">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Ryan.</p>
    </footer>
    
</body>
</html>