Card responsivo Happy Addons: corrigir layout quebrado

Tipo Page Builders

Nome do erro Layout responsivo do widget Card quebrado EN: Happy Addons Card widget responsive layout broken

Severidade Informativo

Descrição O layout responsivo do widget Card do Happy Addons quebra quando a largura da coluna, o tamanho da imagem ou o alinhamento do texto não são ajustados por dispositivo no Elementor, fazendo o card desalinhar, estourar a imagem ou perder a altura igual no celular e no tablet.

O que é layout responsivo do Card no Happy Addons?

O widget Card do Happy Addons é um bloco do Elementor que reúne imagem, badge, título, descrição e botão dentro de uma mesma caixa, usado para mostrar produtos, serviços ou destaques. Como cada controle de estilo (largura e altura da imagem, padding, alinhamento do texto, padding do botão) pode receber um valor diferente para Desktop, Tablet e Mobile no Elementor, o card depende desses ajustes por breakpoint para se manter alinhado em telas menores.

O problema de layout responsivo aparece quando esses valores ficam travados só no Desktop. A largura e a altura da imagem definidas em pixels não encolhem no celular, o alinhamento do texto continua justificado e quebra a leitura, e cards lado a lado numa mesma seção perdem a altura igual quando um tem mais texto que o outro. O resultado é o card desalinhado, com a imagem estourada para fora da caixa ou empilhado de forma estranha no mobile, mesmo sem nenhum erro de código.

Como identificar

No celular, a imagem do Card ultrapassa a borda da caixa ou aparece cortada porque a largura e a altura foram definidas em pixels fixos no Desktop.
Dois ou mais cards lado a lado ficam com alturas diferentes no tablet, deixando os botões desalinhados na base da seção.
O título e a descrição continuam justificados ou alinhados à direita no mobile, quebrando a leitura em telas estreitas.
O padding interno do card, definido em pixels grandes no Desktop, empurra o conteúdo e gera barra de rolagem horizontal no celular.
Os cards não empilham na ordem esperada quando a seção passa de várias colunas para uma coluna única no mobile.

Antes de começar: Antes de reajustar os controles do Card em produção, salve uma revisão da página ou teste primeiro em um ambiente de staging, para poder voltar ao layout anterior caso algum ajuste por dispositivo afete o Desktop sem querer.

Como prevenir

Sempre revise o Card nos três modos do Elementor, Desktop, Tablet e Mobile, antes de publicar, em vez de confiar que o ajuste do Desktop vale para todas as telas.
Use medidas flexíveis como porcentagem ou em para a imagem e o padding do Card, reservando pixels fixos apenas para detalhes que não precisam encolher.
Padronize seções com vários cards usando o Equal Height do Happy Addons desde a montagem, para que diferenças de texto não desalinhem os botões depois.
Defina a largura das colunas como 100 por cento no Mobile como regra padrão das seções de cards, garantindo o empilhamento limpo em telas estreitas.

Causa

A largura e a altura da imagem do Card foram definidas em pixels fixos no modo Desktop e nenhum valor menor foi informado nos modos Tablet e Mobile do Elementor, então a imagem não encolhe e estoura a caixa no celular.
Os cards estão numa seção com colunas de largura percentual fixa que não foi alterada para 100 por cento no breakpoint Mobile, deixando dois ou três cards apertados lado a lado na tela estreita.
O recurso Equal Height do Happy Addons não está ativado na seção, então cada card assume a própria altura conforme o texto e os botões ficam desalinhados no tablet.
O alinhamento do texto do título e da descrição está como Justificado ou à direita e não foi trocado para centralizado ou à esquerda no modo Mobile, prejudicando a leitura.
O padding interno e o column gap da coluna estão em valores grandes herdados do Desktop e não foram reduzidos no Mobile, empurrando o conteúdo e gerando rolagem horizontal.

Como resolver

Edite a página no Elementor e ative a pré-visualização responsiva: Abra a página com o Card do Happy Addons no editor do Elementor e ligue o modo responsivo. Toda alteração de estilo feita com o ícone de um dispositivo selecionado vale só para aquele breakpoint, sem afetar o Desktop.
```
Painel WP -> Páginas -> Editar com Elementor
Clique no ícone de Modo Responsivo na barra inferior do painel
Escolha Mobile ou Tablet antes de mexer em qualquer controle
```
Ajuste a largura da coluna para empilhar os cards no Mobile: Selecione a coluna que contém o Card, abra a aba Layout e, no modo Mobile, defina a largura da coluna como 100 por cento para que cada card ocupe a tela inteira e empilhe um sobre o outro em vez de ficar apertado.
```
Selecione a coluna -> aba Layout (Avançado da coluna)
Com o modo Mobile ativo, defina Largura da Coluna como 100
Repita no modo Tablet se os cards ainda ficarem estreitos
```
Defina largura e altura da imagem por dispositivo: No Card, vá em Estilo e na seção da Imagem. Os controles de largura e altura do Happy Addons aceitam um valor por dispositivo. No modo Mobile, troque o valor em pixels por uma medida flexível ou um número menor para a imagem caber na caixa.
```
Selecione o Card -> aba Estilo -> Imagem
Com o modo Mobile ativo, ajuste Largura e Altura da imagem
Prefira porcentagem ou valor reduzido no lugar do pixel do Desktop
```
Centralize o texto e reduza o padding no Mobile: Ainda no Card, ajuste o alinhamento do título e da descrição para Centralizado ou à esquerda no modo Mobile e reduza o padding interno, evitando que o conteúdo justificado e o espaçamento grande gerem rolagem horizontal no celular.
```
Card -> Conteúdo -> Título e Descrição -> Alinhamento -> Centralizado (modo Mobile)
Card -> Avançado -> Padding -> reduza os valores (modo Mobile)
Coluna -> Avançado -> Padding e Margin -> revise no modo Mobile
```
Ative o Equal Height para alinhar cards lado a lado: Quando há vários cards na mesma seção com textos de tamanhos diferentes, ative o recurso Equal Height do Happy Addons na seção para igualar a altura de todos os cards e manter os botões alinhados na base, inclusive no tablet.
```
Selecione a Seção -> aba Layout (Avançado da seção)
Ative o controle Equal Height (Happy Features)
Recarregue a prévia e confira o alinhamento no Tablet e no Mobile
```

CSS

/* CSS de reforço para o widget Card do Happy Addons no responsivo.
   Cole em Elementor -> Configurações da Página -> CSS Personalizado,
   ou em Aparencia -> Personalizar -> CSS Adicional. */
@media (max-width: 767px) {
    /* Imagem nunca estoura a caixa do card no celular */
    .ha-card .ha-card-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    /* Texto centralizado e legivel no mobile */
    .ha-card .ha-card-title,
    .ha-card .ha-card-content {
        text-align: center;
    }
    /* Cards empilham sem padding exagerado */
    .ha-card {
        padding: 16px;
    }
}

Perguntas frequentes

Por que o Card do Happy Addons quebra só no celular

Porque os valores de largura e altura da imagem, padding e alinhamento foram definidos apenas no modo Desktop do Elementor. Esses controles aceitam um valor por dispositivo, então é preciso ajustá-los também nos modos Tablet e Mobile para o card caber na tela menor.

Como faço os cards ficarem com a mesma altura lado a lado

Ative o recurso Equal Height do Happy Addons na seção que contém os cards. Ele iguala a altura de todos os cards mesmo quando um tem mais texto que o outro, mantendo os botões alinhados na base, inclusive no tablet.

A imagem do Card está estourando para fora da caixa no mobile

Isso acontece quando a largura e a altura da imagem estão em pixels fixos do Desktop. Selecione o Card, vá em Estilo e Imagem, ative o modo Mobile e troque o valor em pixels por uma porcentagem ou um número menor para a imagem caber na caixa.

Como empilho os cards um sobre o outro no celular

Selecione a coluna de cada card, abra o Layout no modo Mobile e defina a largura da coluna como 100 por cento. Assim cada card ocupa a tela inteira e empilha um sobre o outro em vez de ficar apertado lado a lado.

Preciso da versão Pro do Happy Addons para corrigir o layout responsivo do Card

Os ajustes por dispositivo de largura, altura, padding e alinhamento são feitos com os controles responsivos do próprio Elementor e do widget. O essencial do conserto não exige Pro, embora alguns controles avançados do Happy Addons sejam exclusivos da versão Pro.

Por que aparece barra de rolagem horizontal na seção de cards no mobile

Em geral é padding ou column gap grande herdado do Desktop, ou colunas que não passaram para 100 por cento de largura no Mobile. Reduza o padding interno no modo Mobile e ajuste a largura das colunas para eliminar o transbordo lateral.

O alinhamento do texto do Card mudou sozinho no celular

O alinhamento não muda sozinho, ele herda o valor do Desktop. Se o título e a descrição estão justificados ou à direita, selecione o Card, ative o modo Mobile e troque o alinhamento para centralizado ou à esquerda para melhorar a leitura na tela estreita.

Atenção

Como corrigir o Modal Popup do Ultimate Addons que não abre no WordPress

O modal popup do Ultimate Addons não abre quando o tipo de gatilho está mal configurado, quando o elemento de clique não recebe a classe ou ID que dispara o modal, ou quando um conflito de JavaScript interrompe o script do widget antes de o popup ser acionado.

Grave

Como corrigir o Google Map Field do ACF PRO (erro de Google Maps API)

O Google Map Field do ACF PRO renderiza um mapa cinza ou vazio quando não ha uma chave da Google Maps JavaScript API registrada no WordPress, ou quando a chave existe mas as APIs e restricoes do Google Cloud estão incorretas.

Informativo

Como corrigir o Scroll to Top que não funciona no Astra Pro

O Scroll to Top Astra Pro não funciona quando o botão está desativado para o dispositivo atual no Customizer, quando o JavaScript do tema é bloqueado por um plugin de cache, ou quando outro plugin de voltar ao topo entra em conflito com o do Astra.

Grave

Como corrigir o WooCommerce Builder do Elementor que não edita páginas de loja

O WooCommerce Builder do Elementor não edita páginas de loja quando o Elementor Pro está inativo, o WooCommerce não está instalado, ou o template criado no Theme Builder não tem condições de exibição definidas. Sem isso, as páginas de produto e de catálogo continuam usando o layout padrão do tema, mesmo com o template salvo.

Atenção

Como corrigir o Login Widget do Elementor que redireciona para a página errada no WordPress

O Login Widget do Elementor redireciona para a página errada quando o toggle Redirect After Login está desligado, aponta para uma URL incorreta, ou quando o cache serve uma versão antiga do widget e o WordPress aplica o redirecionamento padrão para o wp-admin.

Atenção

Como corrigir a falha de upload de arquivos no JetFormBuilder

A falha de upload no JetFormBuilder acontece quando o campo Media Field rejeita o arquivo por exceder o limite de tamanho ou de quantidade, por não casar com o ALLOW MIME TYPES configurado, ou por o usuário não ter o nível de USER ACCESS exigido para enviar.

Setores

Extensões

Integrações

Como corrigir o layout responsivo do widget Card no Happy Addons

O que é layout responsivo do Card no Happy Addons?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o Modal Popup do Ultimate Addons que não abre no WordPress

Como corrigir o Google Map Field do ACF PRO (erro de Google Maps API)

Como corrigir o Scroll to Top que não funciona no Astra Pro

Como corrigir o WooCommerce Builder do Elementor que não edita páginas de loja

Como corrigir o Login Widget do Elementor que redireciona para a página errada no WordPress

Como corrigir a falha de upload de arquivos no JetFormBuilder

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos