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 none
e 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!