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

Display não funciona fora do media 1024

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

AluraBooks

< ul class="opçoes"> < li class="opçoes_item">< a href="#" class="opçoes_link">Categorias< /li> < li class="opçoes_item">< a href="#" class="opçoes_link">Favoritos< /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; } .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;
}

}

2 respostas
solução!

Oi Vinicius, tudo bem?

Você poderia mandar seu código completo aqui? Você pode usar a ferramenta de inserir bloco de código </>.

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Um abraço e bons estudos.

Pronto, eu acho que ta certo agora 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>

CSS

        .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;
    }