1
resposta

O AluraBooks não some na resolução de mobile

Boa tarde, após continuar o código, cheguei na parte de configurar o @media, e mesmo seguindo o vídeo, na resolução mobile o texto da AluraBooks perde a formatação e não some, gostaria de auxílio para ver onde errei! Link para o projeto: https://github.com/kidzastr/duvida-alurabooks Print do Erro: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oi, Vinicius, tudo bem?

Desculpe a demora em te responder!

O problema que você está enfrentando acontece, pois na classe .container__titulo do arquivo "header.css", que está fora do media-query, há a atribuição de duas propriedades display uma contendo o valor nonee outra contendo o valor block. Como a propriedade display: block está abaixo da propriedade display:none, ela permanece ativa e faz com que mesmo nas telas de dispositivos níveis (menores que 1024 px) o título "Alura Books" seja mostrado.

Para solucionar esse problema, devemos remover a propriedade display:block da classe .container__titulo que está fora do media-query e adicioná-la na classe .container__titulo que está dentro do media-query. Ficaria assim:

.container__titulo {
    display: none;
}

@media screen and (min-width: 1024px) {
    
    .container__titulo, 
    .container__titulo--negrito {
        font-family: var(--fonte-secundaria);
        font-size: 30px;
        display: block;
    }

Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!

Abraços e bons estudos!

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