### [Personalizzazione delle colonne dei campi a scelta multipla sui dispositivi mobili](https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/)
**Pubblicato:** 25 agosto 2024
**Autore:** David Ozokoye
**Contenuto:**
## Introduzione
Vorresti personalizzare il numero di colonne visualizzate nella vista mobile per i campi a scelta multipla? Per impostazione predefinita, i campi a scelta multipla in WPForms vengono visualizzati come colonne singole. Tuttavia, sarai in grado di personalizzarlo con uno snippet CSS personalizzato.
In questo tutorial, ti mostreremo come utilizzare una visualizzazione a 2 colonne nella vista mobile per i campi WPForms a scelta multipla (Checkbox e Scelta multipla).
## Creazione del tuo modulo
Per seguire questo tutorial, dovrai [creare un nuovo modulo](https://wpforms.com/docs/creating-first-form/ "Creazione del tuo primo modulo") o modificarne uno esistente per accedere al generatore di moduli. Nel generatore di moduli, assicurati di aggiungere il campo [Checkbox](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/ "Come personalizzare gli stili del campo Checkbox") o [Scelta multipla](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "Come personalizzare gli stili del campo Scelta multipla") al tuo modulo.
Successivamente, fai clic sul campo a scelta multipla per accedere al suo pannello Opzioni campo. Quindi, vai alla scheda **Avanzate**.
Qui, seleziona l'opzione **Layout scelta** e scegli l'opzione **Due colonne**.
Quando visualizzi il tuo modulo, verrà visualizzato a 2 colonne per il campo Checkbox o Scelta multipla. Tuttavia, sui dispositivi mobili, ogni scelta verrà visualizzata in una singola colonna.
In questo tutorial, ti mostreremo come utilizzare CSS personalizzato per forzare i campi Scelta multipla e Checkbox a mantenere il layout a colonne su una visualizzazione mobile.
## Aggiunta dello snippet
Per iniziare, aggiungeremo prima lo snippet al sito. Se hai bisogno di aiuto su come e dove aggiungere snippet, [assicurati di consultare questa utile documentazione](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
```
/**
* Personalizzazione della colonna del campo a scelta multipla sulla visualizzazione mobile
*
* @link https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
*/
/* Checkbox e pulsanti radio */
@media screen and (max-width: 600px) {
/* Seleziona sia i campi checkbox che radio */
#wpforms-form-2525 .wpforms-field-checkbox ul,
#wpforms-form-2525 .wpforms-field-radio ul {
display: flex;
flex-wrap: wrap;
margin: 0; /* Reimposta eventuali margini predefiniti */
padding: 0; /* Reimposta eventuali padding predefiniti */
}
/* Seleziona gli elementi della lista nei layout a 2 colonne */
#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; /* Assicurati che il padding non influenzi la larghezza */
}
/* Rimuovi il margine da ogni secondo elemento per evitare overflow */
#wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
margin-right: 0;
}
}
```
Assicurati di sostituire `#wpforms-form-2525` con l'ID del modulo specifico a cui desideri applicare queste modifiche. Consulta il nostro tutorial per sapere [come recuperare l'ID del modulo e l'ID del campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "come recuperare l'ID del modulo e l'ID del campo") se hai bisogno di aiuto.
Questo snippet garantirà che i campi Checkbox e Scelta multipla che utilizzano il layout a 2 colonne mantengano il layout nella vista mobile.
Ecco fatto! Ora hai imparato come personalizzare il layout delle colonne per i campi a scelta multipla (Checkbox e Scelta multipla) nella vista mobile.
Vuoi scoprire altri modi per personalizzare i campi WPForms? Dai un'occhiata al nostro tutorial su [come aggiungere un'opzione Seleziona tutto al campo Checkbox in WPForms](https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/ "come aggiungere un'opzione Seleziona tutto al campo Checkbox in WPForms").
**Categorie:** Tutorial
**Tag:** CSS, campi
---