HomeCasa Prompts

Corrigir um problema de layout CSS (Flexbox, Grid, transbordo e z-index)

Descubra porque o seu CSS não se comporta como esperava (transbordos, elementos que não centram, z-index sem efeito) com a causa explicada, como confirmá-la nas DevTools e a correção mínima. Pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Inclui 5 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Iniciante · Código · Pendente de revisão editorial

Pensado para:

Prompt

Atua como especialista em CSS que explica as causas dos problemas de layout com clareza, sem remendos.

Contexto:
- HTML relevante: {{html}}
- CSS relevante: {{css}}
- O que acontece: {{problema}}
- O que esperava: {{esperado}}
- Onde acontece: {{onde}}

Se o problema puder vir de um elemento pai, de estilos globais ou de um framework que não aparece no código, pede-me essa parte antes de propores a solução.

Entregáveis:
1. A causa raiz explicada de forma simples, nomeando o conceito envolvido (modelo de caixa, min-width: auto em elementos flex, transbordo em colunas Grid com 1fr, colapso de margens, contextos de empilhamento, posicionamento, unidades de viewport em telemóvel).
2. Como confirmá-la passo a passo nas DevTools do navegador: que elemento inspecionar, que painel observar (valores calculados, sobreposições de Flexbox e Grid, camadas) e que valor denuncia o problema.
3. A correção mínima com o código exato que muda, antes e depois.
4. Uma alternativa mais robusta se a correção mínima for frágil, com prós e contras.
5. Verificações para não partir outra coisa: outras larguras de ecrã, textos mais longos, outros navegadores.
6. Uma regra prática curta para evitar este problema no futuro.

Restrições:
- Nada de !important, valores mágicos ou overflow: hidden para esconder o sintoma, salvo justificação.
- Não reescrevas a folha de estilos toda: altera só o necessário.
- Se o problema não for reproduzível com o código que te dei, di-lo e explica o que falta.

Formato: causa, verificação, correção com blocos de código, alternativa e lista de verificações.

Como utilizar

  1. Reduz o HTML e o CSS ao mínimo onde o erro acontece, incluindo o contentor pai. 2. Descreve o que vês e o que esperavas, com a largura do ecrã e o navegador. 3. Aplica a correção, faz as verificações e volta com o resultado se persistir.

Exemplo de utilização

Problema: no telemóvel a página tem scroll horizontal e um cartão da grelha sai do contentor · Esperado: duas colunas que se ajustem à largura · Onde: Safari no iPhone, abaixo de 400 px.

Exemplo de resultado

Causa

1fr equivale a minmax(auto, 1fr): o mínimo de cada coluna é a largura mínima do seu conteúdo. Com white-space: pre, o <pre> não pode quebrar linhas, por isso a linha mais longa define esse mínimo e a coluna ultrapassa o ecrã.

Como confirmar

Nas DevTools, ative a sobreposição de Grid em .grelha: a segunda faixa sai do contentor. Em «Calculado», o <pre> é mais largo do que o viewport.

Correção mínima

/* Antes */
.grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Depois */
.grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cartao pre { white-space: pre; overflow-x: auto; }

minmax(0, 1fr) permite que a coluna encolha abaixo do conteúdo, e overflow-x: auto faz scroll apenas dentro do bloco de código, não na página inteira.

Alternativa mais robusta

Uma só coluna em ecrãs estreitos: grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)).

Regra prática

Se uma faixa 1fr tiver texto que não pode quebrar, use minmax(0, 1fr) ou min-width: 0 no filho…

Dados-chave

Categoria
Programação e desenvolvimento · HTML e CSS
Tipo de resultado
Código
Nível
Iniciante
Pensado para
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificado em
Pendente de verificação editorial
Variáveis
HTML relevante, CSS relevante, O que acontece, O que esperava e Onde acontece
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Porque é que o meu z-index não funciona?

Quase sempre porque os elementos estão em contextos de empilhamento diferentes: um pai com transform, opacity inferior a 1, posicionamento com z-index ou isolation cria um novo, e o z-index só compete dentro dele.

Porque é que um elemento flex não encolhe mesmo com pouco espaço?

Os elementos flex têm min-width: auto por omissão e não ficam mais pequenos do que o conteúdo, como uma palavra longa ou uma imagem. Definir min-width: 0 no elemento costuma resolver.

Como encontro o elemento que causa o scroll horizontal?

Nas DevTools, procura o elemento mais largo do que a janela com as sobreposições de layout ou com um outline temporário em todos os elementos. O prompt guia-te nessa verificação.

Para que serve este prompt?

Descubra porque o seu CSS não se comporta como esperava (transbordos, elementos que não centram, z-index sem efeito) com a causa explicada, como confirmá-la nas DevTools e a correção mínima.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (HTML relevante, CSS relevante, O que acontece, O que esperava e Onde acontece). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

Não. É um prompt de nível iniciante: basta preencher os dados e colá-lo na sua ferramenta de IA.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados