# Como corrigir o layout responsivo do widget Card no Happy Addons

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.

Erros relacionados

- [Como corrigir o erro do Image Grid no Happy Addons](https://full.services/wp-fixer/corrigir-image-grid-happy-addons/)
- [Como corrigir o layout quebrado do Pricing Menu no Happy Addons](https://full.services/wp-fixer/corrigir-pricing-menu-layout-happy-addons/)
- [Como corrigir os estilos conflitantes entre Happy Addons e Astra Pro](https://full.services/wp-fixer/corrigir-conflito-estilos-happy-addons-astra-pro/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

```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.

**Fonte:** [Happy Addons — Card Widget (documentação oficial)](https://happyaddons.com/docs/happy-addons-for-elementor/widgets/card/)