Olá!
Achei estranho ela usar o media query com min-width: 1024px nessa aula. Essa aula, especificamente, seria para o layout de tablet, correto? Nesse caso, a largura da tela não seria entre 428px e 1024px ?
O mais curioso é que quando mudo a largura do media query para (min-width: 429px) and (max-width: 1023px), o layout fica todo quebrado para algumas larguras. O que está acontecendo?
Oi, Jessé! Tudo bem?
Sua observação faz total sentido. O que acontece é que, nesse curso, a instrutora optou por simplificar o projeto em apenas duas quebras de layout:
Por isso, quando aparece o min-width: 1024px, o foco é direto nas telas grandes. Tablets, nesse caso, ficam com o mesmo visual do mobile.
Quando você cria a faixa (min-width: 429px) and (max-width: 1023px), o CSS não encontra regras feitas especialmente para ela. Resultado: alguns elementos acabam ficando “quebrados”, já que o código da aula foi pensado só para mobile e desktop.
Se a ideia fosse tratar os tablets como uma faixa intermediária, seria preciso criar uma media query própria para eles e ajustar o layout. Como isso não foi feito no exemplo, eles acabam herdando os estilos do mobile.
Bons estudos ✨