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)
2
respostas

html-css-responsividade-publicacao-projetos - 07 Lista de exercícios

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

por John Lenon Nogueira Dos Santos
| 38.8k xp | 69 posts
Analista

1.Ajustando o espaçamento para telas menores

@media (max-width: 768px) {
    .apresentacao {
        flex-direction: column-reverse;
        margin: 5%;
        text-align: center;
    }
}

também podemos usar padding:

@media (max-width: 768px) {
    .apresentacao {
        padding: 5%;
    }
}

2.Refinando a largura do conteúdo em dispositivos menores

@media (max-width: 768px) {
    .apresentacao__conteudo {
        width: auto; 
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}

3.Avaliando o efeito do width: auto em dispositivos menores
O width: auto é a solução correta para tornar o conteúdo responsivo.

O conteúdo não ultrapasse as bordas da tela.

O layout permanece centralizado e proporcional.

A experiência do usuário em dispositivos móveis é melhorada sem precisar definir um valor fixo.

4.Criando uma conta no GitHub
Minha conta no GitHub: https://github.com/Johnsantos1989

5.Subindo um projeto no GitHub
Meu projeto no GitHub: https://johnsantos1989.github.io/Pagina-para-Curriculo/

2 respostas
solução!
por Lorena Garcia
| 11323.7k xp | 16814 posts
Alura Scuba Team

Oi, John! Como vai?

Gostei bastante da forma como você detalhou os ajustes de responsividade, mostrando alternativas com margin e padding, além de explicar o impacto do width: auto. Esse tipo de anotação facilita muito na hora de revisar e compreender por que cada escolha melhora a experiência em telas menores.

Uma dica interessante para futuros projetos é experimentar o uso de max-width para limitar o tamanho máximo de um elemento, mantendo a proporção em telas maiores. 


.apresentacao__conteudo {
    max-width: 600px;
    margin: 0 auto; /* centraliza horizontalmente */
}

Esse código garante que o conteúdo não fique esticado demais em telas grandes e continue centralizado.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por John Lenon Nogueira Dos Santos
| 38.8k xp | 69 posts
Analista

Oi, Lorena! Tudo ótimo e você?

Fico feliz que tenha gostado das anotações sobre responsividade! Concordo totalmente com a dica do max-width — realmente ajuda a manter o layout equilibrado em telas maiores sem perder a proporção. Vou incorporar isso nos próximos projetos, obrigado pela sugestão!