Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Por que na aula

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Responsividade e atividade Media Queries

por Diego Marcelo Chaves Forlin
| 162.8k xp | 54 posts
Assistente de TI

Boa tarde, tudo bem? Estou com uma dúvida apenas.

No CSS, quando vamos usar media queries, a classe utilizada foi ".apresentacao" que é a section que engloba os

, âncoras, imagens, etc. Há uma classe específica de imagem chamada "apresentacao__imagem" Porém, no CSS, os instrutores usaram a classe ".apresentacao" para usar o flex direction coluna reversa. Podem me explicar o porquê a classe utilizada não foi "apresentacao__imagem" e sim "apresentacao"? O objetivo era colocar a imagem acima do texto se visto no mobile.

O código aqui em CSS style:

`    .apresentacao__imagem{
width:auto;

}

@media (max-width: 1200px) {
    .apresentacao {
        flex-direction: column-reverse;
    }
}`
2 respostas
solução!
por Victor Costa Santos
| 1908.1k xp | 3659 posts
Alura Scuba Team Monitor de ForumOps

Olá Diego!

Respondendo à sua pergunta, a classe ".apresentacao" foi utilizada no exemplo do CSS para aplicar a propriedade "flex-direction: column-reverse" em toda a section, ou seja, em todos os elementos que estão dentro dela, incluindo a imagem.

Se a classe utilizada fosse apenas ".apresentacao__imagem", somente a imagem receberia a propriedade "flex-direction: column-reverse", e não a section inteira, o que não resolveria o problema de colocar a imagem acima do texto em dispositivos móveis.

Ou seja, deixo um exemplo, ao inverter o prédio como um todo, usando "flex-direction: column-reverse", todos os andares, incluindo o primeiro, serão invertidos e a ordem será alterada, o ap 10 vira 1, certo. No entanto, se aplicássemos essa propriedade apenas a um andar específico, como o primeiro, ele permaneceria na mesma posição, pois não haveria outros elementos para inverter com ele.

Dessa forma, ao aplicar a propriedade no elemento todo, garantimos que a inversão ocorra corretamente e a imagem seja colocada acima do texto em dispositivos móveis.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Diego Marcelo Chaves Forlin
| 162.8k xp | 54 posts
Assistente de TI

Agradeço imensamente a sua didática, Sr @Victor Costa Santos.