Dúvida width

Olá Ruan, como vai você? Espero que esteja bem!

A escolha entre usar width: 100% para mobile e width: auto para desktop realmente depende do layout e do comportamento que você deseja para o seu site em diferentes dispositivos.

No geral, usar width: 100% no mobile é uma prática comum e recomendada, pois permite que o conteúdo ocupe toda a largura disponível na tela, o que é útil em dispositivos com telas menores, como smartphones.

No caso do desktop, width: auto é frequentemente usado quando você quer que o elemento ocupe apenas o espaço necessário para o seu conteúdo. No entanto, dependendo do layout que você está tentando alcançar, você pode precisar definir uma largura específica em pixels ou porcentagem.

Por exemplo, se você tem um layout de colunas, você pode querer que cada coluna ocupe uma certa porcentagem da largura total da tela no desktop, mas que cada coluna ocupe 100% da largura da tela no mobile para que elas se empilhem verticalmente.

Aqui está um exemplo de como isso pode ser feito:

/* Estilo para desktop */
.coluna {
  width: 50%; /* Cada coluna ocupa 50% da largura da tela */
}

/* Estilo para mobile */
@media (max-width: 1200px) {
  .coluna {
    width: 100%; /* Cada coluna ocupa 100% da largura da tela */
  }
}

Espero ter ajudado e bons estudos!

Vou bem Sarah, muito obrigado pela explicação.