[Dúvida] Erro de CSS - como centralizar o botão e h1 junto aos demais elementos da tela?

Olá, Esperidião, como vai?

Obrigado por compartilhar o código e também o contexto da análise. Isso ajuda bastante a entender o comportamento da página.

No seu caso, o h1 e o botão já estão centralizados por conta do text-align: center no título e do margin: 40px auto no link. O ponto que acaba influenciando a percepção do alinhamento é que alguns elementos possuem larguras fixas, como o p e a imagem da section. Quando a largura disponível da tela fica menor do que esses valores, eles ultrapassam a área visível e o layout passa a se comportar de forma diferente.

Durante os testes, consegui normalizar esse comportamento adicionando um max-width: 100% ao parágrafo e à imagem dentro da media query de 768px. Ficaria assim:

p {
    max-width: 100%;
    width: 648px;
}

e

section img {
    display: block;
    max-width: 100%;
    width: 659.5px;
    height: 446px;
    margin: 0 auto;
}

Dessa forma, os elementos continuam utilizando a largura definida quando houver espaço suficiente, mas passam a respeitar os limites da tela em resoluções menores, evitando que o conteúdo fique desalinhado visualmente. O fato de a página voltar a parecer centralizada ao girar o celular reforça essa hipótese, já que a largura disponível aumenta.

Uma sugestão para aprofundar esse estudo é abrir as ferramentas de desenvolvedor do navegador e observar como a largura calculada desses elementos muda conforme você reduz a viewport. Você chegou a verificar se algum elemento estava ultrapassando a largura do body durante esse teste?

Espero ter ajudado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Olá, boa tarde!

Que legal! Eu não conhecia esta outra forma de configurar o max-width.

Eu estava até conseguindo ver os elementos centralizados no formato desktop e tablet (768px), porém ainda não consegui compreender este comportamento anômalo do código para telas de mobile (375px).

Eu revisei novamente e acredito que o problema está atribuído à imagem e não sei se os demais elementos se comportam como caixas, no caso do botão, o display é definido como bloco, mas não sei se isso se replica para o h1 também

Em teoria a imagem deveria estar em harmonia com os demais elementos (todos estão praticamente com a mesma largura de 340px com exceção do botão que tem 251px), porém a imagem está com uma assimetria gritante na margem mesmo que eu defina margin: 0 auto.

Eu lembro que na aula, a professora cita que a imagem tem esse efeito sobre os demais elementos, mas não entendo porque a margem está distribuída somente em um lado.

Em teoria esses itens com 340 e 251px de largura deveriam estar simétricos no centro e caberiam perfeitamente neste quadro de 375x840 do mobile.

Oi, Esperidião.

Essa observação é muito interessante e ajuda a entender um comportamento comum em layouts responsivos. O ponto principal é que, na largura de 375px, existem elementos ultrapassando os limites do body. Isso nem sempre fica evidente à primeira vista, porque o navegador continua renderizando o conteúdo completo em vez de recortá-lo exatamente no limite da viewport.

Se você selecionar o elemento body nas ferramentas de desenvolvedor e observar as dimensões dos elementos filhos, verá que o parágrafo e, principalmente, a imagem acabam excedendo a largura disponível. No caso da imagem, por exemplo, dentro da media query de 768px ela continua com width: 659.5px. No DevTools é possível observar que aproximadamente 284px ficam para fora da área visível. Fazendo a conta, 659 - 284 ≈ 375, que corresponde justamente à largura da viewport. Isso mostra que a imagem é maior do que a tela e, por esse motivo, acaba transbordando horizontalmente. Como consequência, a centralização visual deixa de parecer simétrica, mesmo utilizando margin: 0 auto.

Um bom experimento é verificar no DevTools qual regra está sendo aplicada à imagem em 375px e confirmar se a media query de 375px está sobrescrevendo a de 768px conforme esperado. O que você encontrou ao inspecionar a largura computada da imagem e do parágrafo nessa resolução?

E uma dúvida minha, o que acontece se você diminuir a viewport para 374px?

Continue compartilhando suas descobertas no fórum. Estamos à disposição para ajudar.

E uma dúvida minha, o que acontece se você diminuir a viewport para 374px? Ele vai cair na regra dos mobiles (@media(max-width: 375px).

O problema é que na prática ele está usando a imagem nas dimensões do tablet (659.5x446 com essa margem virtual de -283.5 à esquerda).

Eu não sei explicar o porquê, o comportamento da minha página é diferente do apresentado na aula quando a professora define a dimensão da imagem para 340x230px. Eu compreendo que no figma em teoria seria utilizado uma imagem exclusiva para mobiles, diferente da imagem que baixamos e utilizamos tanto nas telas de tablet quanto desktop. Na última aula é explicado que tem outras formas de resolver essa questão da imagem e que veremos nas próximas aulas, mas infelizmente o meu código não está rodando da forma esperada quando a largura é menor ou igual 375 px.

eu já tentei rodar a mesma tela no brave, chrome e mozilla, mas infelizmente o meu código está sendo ignorado e estão usando as dimensões de tablet para o smartphone. A diferença entre a largura imagem utilizada no tablet (659.5px) e esta margem fantasma(-283.5px) resulta na viewport de 376px.

Mas voltando aquela pergunta inicial, miraculosamente página respeita as regras definidas para o max-width de 375x. Então eu interpreto o max-width como um menor - não mais um menor ou igual - para todas as regras de estilo que são definidos. Ainda não consigo fazer a landing page ficar 100% responsiva - não posso mostrar aos empregadores no meu github - mas acredito que é um passo significativo para mim no CSS.

Para próximos passos, eu não sei se eu deveria pensar em um número mágico para a imagem renderizar no meio termo entre o que seria um smartphone e um tablet. Eu não sei se não há um número mágico - que não é 42 - para definir uma proporção que atenda múltiplos tipos de telas e acredito que talvez é dai que eu começo a trabalhar com o srcset.