Elemento bugado por chave/tag não fechada no CSS

Um código CSS sem a chave de fechamento } em um widget anterior quebra os elementos que vêm depois na página.

Quando acontece

Uma faixa animada para de rodar, um carrossel não funciona automaticamente, ou um botão fica desalinhado. O problema costuma começar a partir de uma seção específica e afetar o que vem depois.

Causa

Assim como uma tag HTML aberta sem fechar, um bloco de CSS sem a chave } final fica 'aberto' e contamina o restante do código da página, bugando os próximos elementos.

Exemplo

Todo bloco de CSS abre com a chave { (abertura) e precisa fechar com a chave } (fechamento). Se o } faltar, o bloco fica "aberto" e engole o próximo, quebrando tudo que vem depois.

Errado (o bloco .destaque foi aberto com {, mas nunca fechado):

.destaque {
  color: #ccfe02;
  /* PROBLEMA: faltou fechar este bloco com a chave }  aqui */

.botao {
  display: flex;
}

Certo (cada { tem o seu }):

.destaque {
  color: #ccfe02;
}
/* a linha acima ( } ) é a chave de fechamento que estava faltando */

.botao {
  display: flex;
}

Vale o mesmo para HTML: toda tag aberta precisa ser fechada. <strong>Texto (errado, sem fechar) vira <strong>Texto</strong> (certo, fechado com </strong>).

Solução

1. Identifique a partir de qual seção o problema começa. O código culpado costuma estar nessa seção ou em uma anterior.
2. Abra cada widget de código/CSS dessa região e revise as chaves: cada { precisa de um } correspondente.
3. Feche a chave que está faltando ao final do bloco CSS.
4. Confirme também que nenhuma tag HTML ficou aberta (veja a página 'Pagina Quebrada/Desconfigurada').
5. Salve, atualize no Elementor e recarregue o site.
6. Se um botão (ou outro elemento) aparecer com largura total, menor ou desalinhado - inclusive só no Safari do iPhone, mesmo estando normal no Chrome - a causa recorrente é uma tag HTML aberta sem fechamento (ex.: um <strong> sem o </strong>) em um texto próximo, que buga o restante do código. Localize essa tag e FECHE-A corretamente: isso restaura o alinhamento e a largura do elemento em todos os navegadores e dispositivos.
7. Se a quebra se propagar (elementos param de colar corretamente, seções corretas no editor aparecem erradas no celular, ou o layout 'começa a quebrar' a partir de um certo ponto), identifique a SEÇÃO a partir da qual tudo passa a quebrar - a quebra de código (CSS mal formatado ou tag HTML não fechada) costuma se originar nela. Revise essa seção e, se não encontrar/corrigir o erro, APAGUE a seção inteira culpada: isso resolve a propagação para a colagem e para o mobile.