Ao inserir essa nova <div> para atribuir o display: flex ao h2 & p não alteramos o layout da versã mobile?
Ao inserir essa nova <div> para atribuir o display: flex ao h2 & p não alteramos o layout da versã mobile?
hoje, com a Alura e o Google Gemini
Oi Eduardo, tudo bem?
Entendo que você esteja preocupado com o layout da versão mobile ao adicionar uma nova <div> e aplicar display: flex aos elementos h2 e p. No entanto, a adição dessa <div> e a aplicação do display: flex não devem alterar o layout da versão mobile, a menos que você especifique estilos diferentes para essa <div> em uma media query para telas menores.
No caso da atividade que você está realizando, o objetivo é alterar o tamanho da fonte do título do banner quando a tela tem no mínimo 1024px de largura. Isso pode ser feito utilizando uma media query no CSS. Por exemplo:
@media (min-width: 1024px) {
h2 {
font-size: 36px;
}
}
Neste exemplo, quando a largura da tela é de pelo menos 1024px, o tamanho da fonte do elemento h2 será aumentado para 36px. Isso não afetará o layout da versão mobile, pois a media query só será aplicada quando a condição (min-width: 1024px) for verdadeira.
Um abraço e bons estudos.