Falta pouco!

0 dias

0 horas

0 min

0 seg

Confira já seu desconto!
Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Exercícios MediaQuery

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

por PATRICIA ROSA MAIDANA
| 33k xp | 54 posts
PROFESSOR

olá colegas e tutores:

segue resoluções dos exercícios:

item 1 Ajustando o layout para telas menores

.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}

Item 2 a 5

@media (max-width:1200px){
    .cabecalho{
        padding:10%;
    }   
    .cabecalho__menu{
        justify-content: center;
    }
    .apresentacao{
        flex-direction: column-reverse;
    }
    
}

espero estar tudo correto

grande abraço a todos

Patricia

1 resposta
solução!
por NATHALIA QUEIROZ
| 3460.5k xp | 7954 posts
Alura Scuba Team

Ei! Tudo bem, Patricia?

Parabéns por praticar a atividade! Gostei de como usou display: flex em ".apresentacao" e, no breakpoint @media (max-width:1200px), trocou para flex-direction: column-reverse, centralizando o menu com ".cabecalho__menu" e ajustando padding.

Uma dica: teste e considerar reduzir o gap no mobile para evitar rolagem extra.

Caso queira participar da nossa comunidade no Discord, para interagir por lá também, basta clicar na guia Comunidade > Discord no seu perfil:

Tela inicial da página da Alura com menu lateral escuro e texto branco. Botão "Comunidade" em vermelho no topo. Opções abaixo: "Discord" (estudo com outros), "Discord" (estude com outroas pessoas na nossa comunidade do Discord e "Sugestões".

Continue se dedicando aos estudos e qualquer dúvida, compartilhe.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!