Solucionado
O código original proposto é o seguinte:
@media screen and (min-width: 0) {
.cabecalho {
padding: 0 1rem;
justify-content: center;
}
}
@media screen and (min-width: 768px) {
.cabecalho {
padding: 0 5rem;
justify-content: space-between;
}
}Não seria mais simples deixar apenas a primeira @media e substituir o min-width: 0 por max-width: 768px? Tem algum contraponto nessa alternativa?
hoje, com a Alura e o Google Gemini
Bom dia, Dafany! Tudo bem? Desculpa pela demora em visitar seu tópico.
Não teria contraponto, a única diferença é que teria que botar as configurações de dentro do min-width: 768px no .cabecalho normal. Desse jeito:
.cabecalho {
align-items: center;
background: #f9f9f9;
display: flex;
padding: 0 5rem;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.cabecalho {
padding: 0 1rem;
justify-content: center;
}
}
}O que acontece é que na programação temos diversas maneiras de alcançar o mesmo objetivo. Você pode ficar livre em fazer alterações nos projetos da aula pra treinar seu conhecimento e ver o que acontece com o site em cada mudança =)
Bons estudos!