Oii Saul, tudo ok?
Nesse caso é simples, uma opção bem aceita e simples é aplicar flexbox no contêiner e alinhas a <ul>
de lista e o título em coluna e diminuir o limite de alcance da lista usando width
.
Eu vou deixar o código aqui para ti do arquivo topicos.css
com alguns comentários para ti entender o que eu fiz:
.topicos {
background: var(--azul);
text-align: center;
/* Adicionei essas propriedades de flexbox para alinhar os itens filhos */
display: flex;
align-items: center;
flex-direction: column;
}
.topicos__titulo {
color: var(--branco);
font-weight: 300;
padding: 1em 0;
}
.topicos__lista {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* Mudei o tamanho para as telas menores
e coloquei o espaçamento para não ficar uma visualização feia */
width: 80%;
margin-bottom: 1.5rem;
}
.topico__link {
color: var(--branco);
padding: 1em;
background-color: var(--laranja);
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.topicos__item {
/* Ajustei os espaçamentos */
margin: 1.5em 0.5em;
}
/* Criei uma adaptação para telas médias */
@media screen and (min-width: 950px) {
.topicos__lista {
width: 55%;
}
}
@media screen and (min-width: 1024px) {
.topicos__titulo {
font-size: 24px;
}
.topico__link {
font-size: 22px;
line-height: 1.5em;
}
.topicos__lista {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* Ajustei o limite para telas maiores */
width: 50%;
}
.topicos__item {
display: flex;
flex-wrap: wrap;
/* Ajustei o espaçamento para telas maiores */
margin: .5rem;
}
}
Não está perfeito, mas creio que já ajuda um pouco o seu objetivo, quaisquer dúvidas só perguntar que eu explico.
Tente brincar com os valores e testar no devtools para você ver como isso funciona, divirta-se e aprenda junto :)
Era isso. Espero ter ajudado!
Abraços e bons estudos.
Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓