Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

media querie diferente

Pessoal, Tive que fazer uma pequena alteração na media querie do tópicos para que os links, não ficassem sobrepostos. Isso é algum erro no código ou pode ser apenas uma resposta para uma viewport diferente? No caso, a instrutora alterou apenas o font-size dentro do media querie e eu tive que alteras as medidas do padding e adicionar um gap para afastar as ancoras...

segue o css: (topicos.css)

.topicos {
    background: var(--azul-degrade);
    text-align: center;
    padding: 0.5em 0 1em 0;
}

.topicos__titulo {
    color: var(--branco);
    font-weight: 300;
    margin: 1em 0 2em 0;
    text-transform: uppercase;
}

.topicos__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.topicos__item {
    margin: 1.5em 0.5em;
}

.topicos__link {
    color: var(--branco);
    padding: 1em;
    background-color: var(--laranja);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

@media  screen and (min-width: 1024px) {
    .topicos {
        padding: 0.5em 0 3em 0;
    }

    .topicos__lista {
        gap: 24px;
    }

    .topicos__titulo {
        font-size: 24px;
    }

    .topicos__link {
        font-size:  24px;
    }
}

a seguir o html:

...
                        <li class="topicos__item">
                            <a href="#" class="topicos__link">Marketing Digital</a>
                        </li>
                        <li class="topicos__item">
                            <a href="#" class="topicos__link">Agile</a>
                        </li>
                        <li class="topicos__item">
                            <a href="#" class="topicos__link">Startups</a>
                        </li>
                        <li class="topicos__item">
                            <a href="#" class="topicos__link">HTML & css</a>
                        </li>
                        <li class="topicos__item">
                            <a href="#" class="topicos__link">Python</a>
                        </li>
                        <li class="topicos__item">
                            <a href="#" class="topicos__link">OO</a>
                        </li>
                        <li class="topicos__item">
                            <a href="#" class="topicos__link">Java</a>
                        </li>
                    </ul>
                </section>

            ...
            </html>
1 resposta
solução!

Oi Fernando, tudo bem?

Desculpa a demora em retornar.

Provavelmente é por conta da media querie mesmo. E não tem problemas você ter que fazer modificações, é até bom para você praticar.

Não conseguir testar muito bem o seu código porque ele não veio completo.

Espero que tenha gostado do curso.

Um abraço e bons estudos.