1) Ajustando o espaçamento para telas menores
Para melhorar a visualização do conteúdo em dispositivos menores, é importante ajustar o padding da classe .apresentacao. Você pode utilizar media queries para aplicar diferentes valores de padding conforme o tamanho da tela. Por exemplo, para telas com largura máxima de 600px:
css Copiar Editar @media (max-width: 600px) { .apresentacao { padding: 10px; /* Ajuste o valor conforme necessário */ } } Isso reduzirá o espaçamento lateral, evitando que o conteúdo fique "espremido" ao centro.
2) Refinando a largura do conteúdo em dispositivos menores
Após ajustar o padding, é importante que a largura da classe .apresentacao__conteudo acompanhe essas mudanças. Você pode definir a largura como uma porcentagem ou utilizar unidades relativas para garantir que o conteúdo se adapte ao novo padding. Por exemplo:
css Copiar Editar .apresentacao__conteudo { width: 100%; /* O conteúdo ocupará 100% da largura disponível / box-sizing: border-box; / Inclui padding e border no cálculo da largura total */ } A propriedade box-sizing: border-box; assegura que o padding seja incluído no cálculo da largura total do elemento, evitando que ele ultrapasse os limites desejados. W3SCHOOLS.COM
3) Avaliando o efeito do width: auto em dispositivos menores
Definir width: auto; na classe .apresentacao__conteudo permite que a largura do conteúdo seja determinada automaticamente pelo navegador, com base no conteúdo e no padding aplicado. Isso pode ser útil para garantir que o conteúdo se ajuste dinamicamente ao espaço disponível, especialmente após aplicar um padding de 5%. No entanto, é importante testar essa configuração em diferentes tamanhos de tela para garantir uma exibição adequada.
4) Criando uma conta no GitHub
5) Subindo um projeto no GitHub
