1
resposta

Alteração de cor do body dentro do media querie sem sucesso

Olá, boa tarde!

Tentei alterar meu código do css conforme constou na tela do exercício, "Nesse exemplo foi aplicada a cor roxa no body dentro da media querie utilizada no projeto para telas de no máximo 1200 pixels", tentei mudar de black para yellow e não aconteceu nada no meu arquivo. Baixei o material da aula completo e tentei mudar por ele e nada o que eu errei no código?

abaixo no codigo esta assim o body:

body{ box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); }

abaixo consta o que coloquei no media, pelo que vi a Rafa falando não deveriamos repetir o elmento já declarado no projeto como o (background-color) que esta no body, mas tentei mesmo assim rs, pq não saberia fazer de outro jeito

@media (max-width: 1200px) { .body{ background-color: yellow; }

.cabecalho{
     padding: 10%;  
}
.cabecalho__menu{
    justify-content: center;
}
.apresentacao{
    flex-direction: column-reverse;
}

}

1 resposta

Olá, Vanessa! Tudo bem?

Fiz um teste básico na parte que você mencionou não estar funcionando (background amarelo no body). Acessei o material da sua aula e gravei um vídeo para demonstrar o problema e a solução. Baixei os arquivos diretamente do diretório Portifolio-HTML-e-CSS-Curso4, disponível no curso.

-- Link do vídeo: Clique aqui - (redirecionado para o site FlexClip)

-- Correção:

  • Remova o ponto (.) antes de body, deixando o código assim:
@media (max-width: 1200px) { 
    body { 
        background-color: yellow; 
    }
    .cabecalho {
        padding: 10%;  
    }
    .cabecalho__menu {
        justify-content: center;
    }
    .apresentacao {
        flex-direction: column-reverse;
    }
}

-- Explicação: O ponto antes de body faz com que o CSS interprete essa regra como se estivesse estilizando um elemento com a classe .body, e não a própria tag < body >. Como essa classe não existe no HTML do curso, a regra não se aplica, mantendo o fundo na cor padrão do navegador. Ao remover o ponto, o estilo passa a ser aplicado corretamente à tag < body >, e o fundo amarelo aparece como esperado.

Espero ter ajudado! Qualquer dúvida, não hesite em me chamar por aqui. Abraço!