[Dúvida] Dificuldade em tornar site responsivo

Olá Enzo, tudo bem?

O desenvolvimento de um site responsivo pode ser um pouco desafiador e requer planejamento cuidadoso para garantir que o layout e os elementos se ajustem adequadamente a diferentes tamanhos de tela. Para simplificar o processo e evitar a necessidade de muitos @media queries, você pode seguir algumas práticas recomendadas:

1. Usar um grid system: uma grade é uma maneira de organizar elementos em uma página em colunas e linhas, permitindo que eles se ajustem automaticamente ao tamanho da tela. Existem muitas bibliotecas de grade disponíveis, como Bootstrap ou Foundation, que podem facilitar muito o processo de design responsivo.

2. Usar unidades relativas: unidades como porcentagem, em e rem são escalonáveis e podem ajudar a manter o layout consistente em diferentes tamanhos de tela.

3. Limitar o uso de valores absolutos: evitar o uso de valores absolutos, como pixels, para dimensionar elementos pode tornar o design mais flexível e adaptável a diferentes dispositivos.

4. Priorizar o conteúdo: certifique-se de que o conteúdo mais importante esteja visível e acessível, mesmo em telas menores. Considere ocultar elementos menos importantes em telas menores ou reorganizar o layout para que o conteúdo principal apareça primeiro.

5. Testar em vários dispositivos: teste seu site em vários dispositivos e tamanhos de tela para garantir que o design seja responsivo e se adapte adequadamente a diferentes resoluções.

Quanto ao seu repositório GitHub, parece que você já está usando alguns @media queries para ajustar o layout em diferentes tamanhos de tela. Uma opção seria tentar simplificar o layout geral do site, limitando o número de elementos que precisam ser ajustados em tamanhos de tela menores. Além disso, você pode tentar usar um grid system para ajudar a organizar os elementos em colunas e linhas, o que pode tornar o design mais fácil de ajustar em diferentes tamanhos de tela.

Espero que essas dicas ajudem! Um abraço e bons estudos!