Solucionado (ver solução)
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!