Entrar Ainda não tem acesso?
1
resposta

Meu rodapé ainda continua aparecendo a lista

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Um novo footer

por Estudante
| 174.9k xp | 7 posts

olá, poderiam ajudar a encontrar o erro no meu código, mesmo revisando ainda não, o que acontece é que quando coloco em uma dimensão menor ainda aparece a lista no rodapé, segue abaixo:

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

meu rodapé.css

.hr { margin: 0; } .rodapé { background-color: var(--branco); padding: 1em;

}

.lista-rodapé { display: none; }

@media screen and (min-width: 1024px) { .rodapé { display: flex; justify-content: space-around; }

.lista-rodapé {
    display: block;
}

.lista-rodapé__item {
    display: flex;
    align-items: center;
    margin: 0.6em;       
}

.lista-rodapé__link {
    color: var(--cinza);
    text-decoration: none;
    margin-left: 0.6em;
}
   
.lista-rodapé__titulo {
    font-size: 14px;
    color: var(--cinza-claro);
    text-transform: uppercase;
}

.rodapé__titulo {
    font-size: 24px;
}

}

1 resposta
por Maria Eduarda Gonçalves Furlan
| 1939k xp | 6655 posts
Instrutor Monitora de Fórum | Alura

Olá, Sergio! Tudo bem?

Parece que você está tendo problemas com a responsividade do seu rodapé, certo? Pelo que percebi, você gostaria que a lista do rodapé desaparecesse em dimensões menores, mas isso não está acontecendo.

No entanto, um problema comum que pode estar acontecendo é que seu navegador pode estar armazenando em cache o CSS antigo. Tente limpar o cache do seu navegador e recarregar a página para ver se a lista desaparece em dimensões menores como esperado.

Outra possibilidade é que algum outro CSS esteja sobrescrevendo suas regras. Você pode verificar isso inspecionando o elemento no navegador e verificando se as regras CSS estão sendo aplicadas corretamente.

Por exemplo, se você estiver usando o Google Chrome, pode clicar com o botão direito do mouse no elemento que deseja inspecionar, selecionar "Inspecionar" e, em seguida, na aba "Styles" do painel que aparece, você pode ver todas as regras CSS que estão sendo aplicadas a esse elemento. Se a regra display: none; para a classe .lista-rodapé estiver riscada, isso significa que está sendo sobrescrita por outra regra.

Certifique-se também de que o arquivo CSS "rodapé.css" esteja sendo linkado corretamente no seu documento HTML.

Espero ter ajudado, caso tenha dúvidas fico à disposição.

Abraços e bons estudos!