Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
1
resposta

[Dúvida] Responsividade em telas de celulares Parte 3

@media (max-width:1200px){
    .titulo__cabeçalho{
        justify-content: center;
        text-align: center;
    }
    .cabeçalho{
        padding: 10%;
        gap: 50px;
    }
    .cabeçalho__menu{
        justify-content: center;
    }
    .apresentacao{
        flex-direction: column-reverse;
        padding: 5% 10%;      
}
    .apresentacao__links__txt__caixa{
        padding:10%;
        width:90%;
    }
    .apresenta__conteudo{
        width:auto;
    }
    .apresentacao__imagem{
        width: 50%;
    }
    .rodape{
        width: 100%;
        font-size: 1.3rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
 }
 @media (max-width:1037px){

    .titulo__cabeçalho{
        justify-content: center;
        text-align: center;
    }
    .cabeçalho{
        padding: 10%;
        gap: 50px;
    }
        .titulo__cabeçalho{
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    .cabeçalho__menu{
        justify-content: center;
    }
    .apresentacao{
        flex-direction: column-reverse;
        padding: 5% 10%;      
}
    .apresentacao__links__txt__caixa{
        padding:10%;
        width:90%;
    }
    .apresenta__conteudo{
        width:auto;
    }
    .rodape{
        word-wrap: inherit;
        width: 100%;
        font-size: 1.3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .rodape__ancora{
        width: 100%;
        align-items: center;
        justify-content: center;
    }
}
@media(max-width:829px){
    .rodape{
        display: flex;
        flex-direction: column;
    }
}
 @media (max-width:483px){
    .titulo__cabeçalho{
        justify-content: center;
        text-align: center;
        flex-direction: column;
        font-size: 1.7rem;
    }
    .cabeçalho{
        padding: 5%;
        gap: 50px;
    }
    .cabeçalho__menu{
        justify-content: center;
        display: flex; 
    }
    .apresentacao{
        flex-direction: column-reverse;
        display: flex;
        justify-content: center;
        align-items: center;    
    }
    .apresentacao__links__txt__caixa{
        padding:10%;
        width:90%;
    }
    .apresenta__conteudo{
        width:auto;
    }
    .apresentacao__imagem{
        width: 100%;
    }
    .rodape{
        word-wrap: inherit;
        width: 100%;
        font-size: 1.3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .rodape__ancora{
        width: 100%;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 408px) {
    .rodapé{
        font-size: 1rem;
    }
}
1 resposta
solução!

Oi, Roger, tudo bem?

Parabéns pelo uso dosmedia queries, ficou excelente! Dessa forma, seu projeto terá formatações específicas para diferentes dispositivos.

Também agradeço por compartilhar seu código, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum.

Abraços e bons estudos!