Solucionado
Entendo que foi um recurso usar o @media para definir quando adequar para celular, no entanto o vaor usado em pixel na aula não representa o maior celular. a solução mais simples que eu encontrei foi alterar para um valor maior, no caso 435px, caso tiver um tablet com esse mesmo valor, e melhor que a imagem apareça menor no tablet do que maior no celular, descentralizando todo o projeto.
Olá, André, como vai?
Sua observação é pertinente. De fato, existem celulares com telas maiores que 375px, esse valor foi usado na aula como referência para um modelo comum, mas não representa todos os dispositivos do mercado.
A solução que você encontrou, aumentando o breakpoint para 435px, funciona e resolve o caso imediato, mas existe uma abordagem que tende a ser mais robusta para lidar com essa variedade de tamanhos: em vez de tentar acertar um valor exato para cada dispositivo, podemos usar breakpoints que cubram faixas de tela, pensando em intervalos.
Por exemplo, combinando max-width e min-width dentro do @media, conseguimos delimitar com mais precisão quando determinado estilo deve ser aplicado:
/* Celular: telas até 767px */
@media (max-width: 767px) {
h1 {
font-size: 40px;
}
p {
font-size: 20px;
width: 90%;
}
}
/* Tablet: entre 768px e 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
p {
width: 648px;
}
}
Repare também que, no exemplo acima, usei width: 90% para o parágrafo no celular, em vez de um valor fixo em pixels. Isso faz com que o elemento se adapte proporcionalmente à largura da tela, o que é especialmente útil justamente para cobrir celulares de tamanhos variados, sem precisar criar um breakpoint para cada um.
O projeto da aula trabalha com o conceito de layout adaptativo, que responde a dimensões específicas. Mas no mercado, o mais comum é o layout responsivo, que usa porcentagens, unidades relativas e faixas de breakpoint para se ajustar de forma mais fluida a qualquer tamanho de tela.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!