Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] O titulo não esta alterando de acordo com a responsividade

Ao mudar do tablet para o mobile, o titulo se mantém e não desaparece como deveria ser. alguém saberia como resolver?

Este é o código em CSS.



.container__titulo {
    display: none;
}

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

.container__titulo { 
    font-weight: 400;
    display: block;
}

.container__titulo--negrito {
    font-weight: 700;

}

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

2 respostas
solução!

O problema está aqui:

.container__titulo { 
    font-weight: 400;
    display: block;
}

O css lê o documento de cima para baixo. No seu caso, você define que o "container__titulo" terá "display: none" como padrão, e logo abaixo da media query diz para ele ter "display:block"

Como o objetivo é esconder o texto no mobile e mostrar o texto nas telas maiores, o código acima deveria estar dentro da media query

Olá André tudo bom? sou aluno e vou tentar ajudar. Pelo que reparei tem uma propriedade display:block que é processado fora do media query e isso acaba por não garantir a mudança pois sempre será carregado independente do tamanho da tela. Acredito que você queria o css

.container__titulo { 
    font-weight: 400;
    display: block;
}

estivesse dentro de uma mediaquery ficando assim por exemplo

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

espero que ajude e bons estudos