### [Personnalisation des colonnes des champs à choix multiples sur les appareils mobiles](https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/)
**Publié le :** 25 août 2024
**Auteur :** David Ozokoye
**Contenu :**
## Introduction
Souhaitez-vous personnaliser le nombre de colonnes affichées en vue mobile pour les champs à choix multiples ? Par défaut, les champs à choix multiples dans WPForms s'affichent en une seule colonne. Cependant, vous pourrez le personnaliser avec un extrait de CSS personnalisé.
Dans ce tutoriel, nous vous montrerons comment utiliser un affichage à 2 colonnes en vue mobile pour les champs WPForms à choix multiples (cases à cocher et choix multiples).
## Création de votre formulaire
Pour suivre ce tutoriel, vous devrez [créer un nouveau formulaire](https://wpforms.com/docs/creating-first-form/ "Création de votre premier formulaire") ou en modifier un existant pour accéder au constructeur de formulaires. Dans le constructeur de formulaires, assurez-vous d'ajouter le champ [Cases à cocher](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/ "Comment personnaliser les styles du champ de cases à cocher") ou [Choix multiples](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "Comment personnaliser les styles du champ de choix multiples") à votre formulaire.
Après cela, cliquez sur le champ à choix multiples pour accéder à son panneau Options du champ. Ensuite, accédez à l'onglet **Avancé**.
Ici, sélectionnez l'option **Disposition des choix** et choisissez l'option **Deux colonnes**.
Lorsque vous visualisez votre formulaire, il s'affichera en 2 colonnes pour le champ Cases à cocher ou Choix multiples. Cependant, sur les appareils mobiles, chaque choix s'affichera dans une seule colonne.
Dans ce tutoriel, nous vous montrerons comment utiliser du CSS personnalisé pour forcer les champs Choix multiples et Cases à cocher à conserver la disposition en colonnes sur un affichage mobile.
## Ajout de l'extrait
Pour commencer, nous allons d'abord ajouter l'extrait au site. Si vous avez besoin d'aide sur comment et où ajouter des extraits, [veuillez consulter cette documentation utile](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
```
/**
* Personnalisation de la colonne du champ à choix multiples sur l'affichage mobile
*
* @link https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
*/
/* Cases à cocher et boutons radio */
@media screen and (max-width: 600px) {
/* Cibler les champs de cases à cocher et de radio */
#wpforms-form-2525 .wpforms-field-checkbox ul,
#wpforms-form-2525 .wpforms-field-radio ul {
display: flex;
flex-wrap: wrap;
margin: 0; /* Réinitialiser les marges par défaut */
padding: 0; /* Réinitialiser le remplissage par défaut */
}
/* Cibler les éléments de liste dans les dispositions à 2 colonnes */
#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; /* Assurer que le remplissage n'affecte pas la largeur */
}
/* Supprimer la marge du deuxième élément sur deux pour éviter le dépassement */
#wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
margin-right: 0;
}
}
```
Assurez-vous de remplacer `#wpforms-form-2525` par l'ID du formulaire spécifique auquel vous souhaitez appliquer ces modifications. Consultez notre tutoriel pour savoir [comment récupérer l'ID du formulaire et l'ID du champ](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "comment récupérer l'ID du formulaire et l'ID du champ") si vous avez besoin d'aide.
Cet extrait garantira que les champs Cases à cocher et Choix multiples qui utilisent la disposition à 2 colonnes conservent la disposition sur la vue mobile.
C'est tout ! Vous savez maintenant comment personnaliser la disposition des colonnes pour les champs à choix multiples (Cases à cocher et Choix multiples) en vue mobile.
Vous souhaitez en savoir plus sur la personnalisation des champs WPForms ? Consultez notre tutoriel sur [l'ajout d'une option Tout sélectionner au champ Cases à cocher dans WPForms](https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/ "ajout d'une option Tout sélectionner au champ Cases à cocher dans WPForms").
**Catégories :** Tutoriels
**Tags :** CSS, champs
---