### [Personalizar Colunas de Campos de Múltipla Escolha em Dispositivos Móveis](https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/)
**Publicado:** 25 de agosto de 2024
**Autor:** David Ozokoye
**Conteúdo:**
## Introdução
Gostaria de personalizar o número de colunas exibidas na visualização móvel para campos de múltipla escolha? Por padrão, os campos de múltipla escolha no WPForms são exibidos como colunas únicas. No entanto, você poderá personalizá-lo com um trecho de CSS personalizado.
Neste tutorial, mostraremos como usar uma exibição de 2 colunas na visualização móvel para campos de múltipla escolha (Caixas de seleção e Múltipla Escolha) do WPForms.
## Criação do Seu Formulário
Para acompanhar este tutorial, você precisará [criar um novo formulário](https://wpforms.com/docs/creating-first-form/ "Criando Seu Primeiro Formulário") ou editar um existente para acessar o construtor de formulários. No construtor de formulários, certifique-se de adicionar o campo [Caixas de seleção](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/ "Como Personalizar os Estilos do Campo de Caixa de Seleção") ou [Múltipla Escolha](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "Como Personalizar os Estilos do Campo de Múltipla Escolha") ao seu formulário.
Depois disso, clique no campo de múltipla escolha para acessar o painel Opções do Campo. Em seguida, navegue até a guia **Avançado**.
Aqui, selecione a opção **Layout das Opções** e escolha a opção **Duas Colunas**.
Ao visualizar seu formulário, ele exibirá 2 colunas para o campo Caixas de Seleção ou Múltipla Escolha. No entanto, em dispositivos móveis, ele exibirá cada opção em uma única coluna.
Neste tutorial, mostraremos como usar CSS personalizado para forçar os campos de Múltipla Escolha e Caixas de Seleção a manterem o layout de colunas em uma exibição móvel.
## Adicionando o Trecho
Para começar, vamos adicionar o trecho ao site primeiro. Se precisar de ajuda sobre como e onde adicionar trechos, [certifique-se de revisar esta documentação útil](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
```
/**
* Personalizando Coluna de Campo de Múltipla Escolha em Exibição Móvel
*
* @link https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
*/
/* Caixas de Seleção e Botões de Rádio */
@media screen and (max-width: 600px) {
/* Alvo de campos de caixa de seleção e rádio */
#wpforms-form-2525 .wpforms-field-checkbox ul,
#wpforms-form-2525 .wpforms-field-radio ul {
display: flex;
flex-wrap: wrap;
margin: 0; /* Redefinir margens padrão */
padding: 0; /* Redefinir preenchimento padrão */
}
/* Alvo de itens de lista em layouts de 2 colunas */
#wpforms-form-2525 .wpforms-list-2-columns ul li {
width: calc(50% - var(--wpforms-field-size-input-spacing));
margin-right: var(--wpforms-field-size-input-spacing);
box-sizing: border-box; /* Garantir que o preenchimento não afete a largura */
}
/* Remover margem do segundo item para evitar transbordamento */
#wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
margin-right: 0;
}
}
```
Certifique-se de substituir `#wpforms-form-2525` pelo ID do formulário específico ao qual deseja aplicar essas alterações. Veja nosso tutorial para aprender [como recuperar o ID do Formulário e o ID do Campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "como recuperar o ID do Formulário e o ID do Campo") se precisar de ajuda com isso.
Este trecho garantirá que os campos Caixas de Seleção e Múltipla Escolha que usam o layout de 2 colunas mantenham o layout na visualização móvel.
É isso! Agora você aprendeu como personalizar o layout de colunas para campos de múltipla escolha (Caixas de Seleção e Múltipla Escolha) na visualização móvel.
Quer aprender mais maneiras de personalizar campos do WPForms? Confira nosso tutorial sobre [adicionar uma opção Selecionar Tudo ao campo Caixas de Seleção no WPForms](https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/ "adicionar uma opção Selecionar Tudo ao campo Caixas de Seleção no WPForms").
**Categorias:** Tutoriais
**Tags:** CSS, campos
---