### [Personalización de las columnas de campos de opción múltiple en dispositivos móviles](https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/)
**Publicado:** 25 de agosto de 2024
**Autor:** David Ozokoye
**Contenido:**
## Introducción
¿Le gustaría personalizar el número de columnas que se muestran en la vista móvil para los campos de opción múltiple? Por defecto, los campos de opción múltiple en WPForms se muestran como columnas únicas. Sin embargo, podrá personalizarlo con un fragmento de CSS personalizado.
En este tutorial, le mostraremos cómo utilizar una visualización de 2 columnas en la vista móvil para los campos de opción múltiple de WPForms (Casillas de verificación y Opción múltiple).
## Creación de su formulario
Para seguir este tutorial, necesitará [crear un nuevo formulario](https://wpforms.com/docs/creating-first-form/ "Creación de su primer formulario") o editar uno existente para acceder al generador de formularios. En el generador de formularios, asegúrese de añadir el campo [Casillas de verificación](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/ "Cómo personalizar los estilos del campo de casillas de verificación") o [Opción múltiple](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "Cómo personalizar los estilos del campo de opción múltiple") a su formulario.
Después de eso, haga clic en el campo de opción múltiple para acceder a su panel de Opciones de campo. Luego, navegue hasta la pestaña **Avanzado**.
Aquí, seleccione la opción **Diseño de opciones** y elija la opción **Dos columnas**.
Cuando vea su formulario, se mostrará en 2 columnas para el campo Casillas de verificación u Opción múltiple. Sin embargo, en los dispositivos móviles, cada opción se mostrará en una sola columna.
En este tutorial, le mostraremos cómo utilizar CSS personalizado para forzar que los campos de Opción múltiple y Casillas de verificación conserven el diseño de columnas en una pantalla móvil.
## Añadir el fragmento
Para empezar, vamos a añadir primero el fragmento al sitio. Si necesita ayuda sobre cómo y dónde añadir fragmentos, [asegúrese de consultar esta útil documentación](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
```
/**
* Personalización de la columna del campo de opción múltiple en la pantalla móvil
*
* @link https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
*/
/* Casillas de verificación y botones de radio */
@media screen and (max-width: 600px) {
/* Dirigirse a los campos de casillas de verificación y de radio */
#wpforms-form-2525 .wpforms-field-checkbox ul,
#wpforms-form-2525 .wpforms-field-radio ul {
display: flex;
flex-wrap: wrap;
margin: 0; /* Restablecer márgenes predeterminados */
padding: 0; /* Restablecer relleno predeterminado */
}
/* Dirigirse a los elementos de lista en diseños de 2 columnas */
#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; /* Asegurar que el relleno no afecte al ancho */
}
/* Eliminar el margen del segundo elemento para evitar desbordamiento */
#wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
margin-right: 0;
}
}
```
Asegúrese de reemplazar `#wpforms-form-2525` con el ID del formulario específico al que desea aplicar estos cambios. Consulte nuestro tutorial para aprender [cómo recuperar el ID del formulario y el ID del campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "cómo recuperar el ID del formulario y el ID del campo") si necesita ayuda con ello.
Este fragmento garantizará que los campos de Casillas de verificación y Opción múltiple que utilizan el diseño de 2 columnas conserven el diseño en la vista móvil.
¡Eso es todo! Ahora ha aprendido a personalizar el diseño de columnas para los campos de opción múltiple (Casillas de verificación y Opción múltiple) en la vista móvil.
¿Quiere aprender más formas de personalizar los campos de WPForms? Consulte nuestro tutorial sobre [cómo añadir una opción "Seleccionar todo" al campo de Casillas de verificación en WPForms](https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/ "cómo añadir una opción "Seleccionar todo" al campo de Casillas de verificación en WPForms").
**Categorías:** Tutoriales
**Etiquetas:** CSS, campos
---