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

Erro no display

Opa! Eu já re-escrevi mais de 30x e tentei de diversos jeitos mas não desaparece o "AluraBooks" e nem a lista criada quando a tela diminui.

HTML

<h1 class="container_titulo"><b class="container_titulo-negrito">Alura</b>Books</h1>
        </div>
        <ul class="opçoes">
            <li class="opçoes_item"><a href="#" class="opçoes_link">Categorias</a></li>
            <li class="opçoes_item"><a href="#" class="opçoes_link">Favoritos</a></li>
            <li class="opçoes_item"><a href="#" class="opçoes_link">Minha estante</a></li>
        </ul>
.container_botao{
    display: none;
}
.container_titulo {
    display: none;
}
.opcoes{
    display: none;
}


@media screen and (min-width: 102px) {
    .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;
    }

    .opçoes{
        display: flex;
    }
    .opçoes_item{
        padding: 0 1em;
        text-transform: uppercase;
    }
    .opçoes_link{
        color: var(--cor-preto);
        text-decoration: none;
    }
8 respostas

Olá, Vinicius. Como vai?

Analisando seu código reparei que esta faltando o fechamento de chaves } ao final do código de @media screen and (min-width: 102px) {

Pode verificar se incluindo ele resolve o problema por favor?

Aguardo seu retorno. :)

Opa, tudo bem? respondendo sua pergunta, sim esta com as chaves

solução!

Primeiro, notei um erro de digitação em seu código CSS. Você escreveu ".opcoes" em vez de ".opçoes" que foi a forma escrita no HTML. Certifique-se de que as classes em seu CSS correspondam exatamente às classes em seu HTML.

Aqui está o código HTML e CSS corrigido:

HTML:

<h1 class="container_titulo"><b class="container_titulo-negrito">AluraBooks</b></h1>
<ul class="opçoes">
    <li class="opçoes_item"><a href="#" class="opçoes_link">Categorias</a></li>
    <li class="opçoes_item"><a href="#" class="opçoes_link">Favoritos</a></li>
    <li class="opçoes_item"><a href="#" class="opçoes_link">Minha estante</a></li>
</ul>

CSS

.container_botao {
    display: none;
}

.container_titulo {
    display: none;
}

.opçoes {
    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;
    }

    .opçoes {
        display: flex;
    }

    .opçoes_item {
        padding: 0 1em;
        text-transform: uppercase;
    }

    .opçoes_link {
        color: var(--cor-preto);
        text-decoration: none;
    }
}

Agora, com essas correções, seu título "AluraBooks" e a lista de opções devem aparecer apenas quando a largura da tela for igual ou superior a 1024 pixels. Se o problema continuar, por favor, me avise para que possamos investigar mais a fundo e tentar uma nova abordagem. Espero ter ajudado ou pelomenos dado uma luz sobre o problema.

DICA: evita utilizar, ç ou qualquer tipo de acentos em nomes de class ou ID no html e no css.

tmj

Opa! Mano, resolveu porem eu ainda não achei o erro ta ligado? Eu fiz um acerto do Ç pelo C no codigo inteiro e mesmo assim não ia mas quando eu dava control C e Control V com o que você fez dava certo. To feliz que deu certo mas insatisfeito porque não consegui entender aonde eu errei

As vezes procurar um caracter que está diferente comparando o código é igual procurar uma agulha no palheiro. Quando fico com dificuldade em encontrar alguma diferença eu uso comparadores de texto online, como esse:

https://www.invertexto.com/comparar-textos

Assim ajuda a economizar tempo

Opa, consegui achar o erro estava em: @media screen and (min-width: 102px)

estava faltando o numero 4 kkkkkkkkkkk (rindo de nervoso)

Acontece nos melhores projetos heheh