### [Anpassen von Spalten für Multiple-Choice-Felder auf Mobilgeräten](https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/)
**Veröffentlicht:** 25. August 2024
**Autor:** David Ozokoye
**Inhalt:**
## Einleitung
Möchten Sie die Anzahl der Spalten anpassen, die auf der mobilen Ansicht für Multiple-Choice-Felder angezeigt werden? Standardmäßig werden Multiple-Choice-Felder in WPForms als einzelne Spalten angezeigt. Sie können dies jedoch mit einem benutzerdefinierten CSS-Snippet anpassen.
In diesem Tutorial zeigen wir Ihnen, wie Sie eine 2-Spalten-Anzeige für WPForms Multiple-Choice-Felder (Kontrollkästchen und Multiple Choice) in der mobilen Ansicht verwenden.
## Erstellen Ihres Formulars
Um diesem Tutorial folgen zu können, müssen Sie [ein neues Formular erstellen](https://wpforms.com/docs/creating-first-form/ "Erstellen Ihres ersten Formulars") oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen. Stellen Sie im Formular-Generator sicher, dass Sie entweder das [Kontrollkästchen](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/ "Anpassen der Stile von Kontrollkästchenfeldern") oder das [Multiple Choice](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "Anpassen der Stile von Multiple-Choice-Feldern") Feld zu Ihrem Formular hinzufügen.
Klicken Sie anschließend auf das Multiple-Choice-Feld, um auf dessen Feldoptionen zuzugreifen. Navigieren Sie dann zur Registerkarte **Erweitert**.
Wählen Sie hier die Option **Auswahl-Layout** und wählen Sie die Option **Zwei Spalten**.
Wenn Sie Ihr Formular anzeigen, wird es für die Kontrollkästchen- oder Multiple-Choice-Felder in 2 Spalten angezeigt. Auf Mobilgeräten wird jedoch jede Auswahl in einer einzelnen Spalte angezeigt.
In diesem Tutorial zeigen wir Ihnen, wie Sie benutzerdefiniertes CSS verwenden, um Multiple-Choice- und Kontrollkästchenfelder dazu zu bringen, das Spaltenlayout auf einer mobilen Anzeige beizubehalten.
## Hinzufügen des Snippets
Zuerst fügen wir das Snippet zur Website hinzu. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets hinzufügen können, [lesen Sie bitte diese hilfreiche Dokumentation](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
```
/**
* Anpassen der Spalten von Multiple-Choice-Feldern auf mobilen Geräten
*
* @link https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
*/
/* Kontrollkästchen und Radio-Buttons */
@media screen and (max-width: 600px) {
/* Ziel für Kontrollkästchen- und Radio-Felder */
#wpforms-form-2525 .wpforms-field-checkbox ul,
#wpforms-form-2525 .wpforms-field-radio ul {
display: flex;
flex-wrap: wrap;
margin: 0; /* Standard-Ränder zurücksetzen */
padding: 0; /* Standard-Abstände zurücksetzen */
}
/* Ziel für Listenelemente in 2-Spalten-Layouts */
#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; /* Sicherstellen, dass Abstände die Breite nicht beeinflussen */
}
/* Rand für jedes zweite Element entfernen, um Überlauf zu verhindern */
#wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
margin-right: 0;
}
}
```
Ersetzen Sie `#wpforms-form-2525` durch die ID des spezifischen Formulars, auf das Sie diese Änderungen anwenden möchten. Sehen Sie sich unser Tutorial an, um zu erfahren, [wie Sie die Formular-ID und Feld-ID abrufen](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "wie Sie die Formular-ID und Feld-ID abrufen"), wenn Sie dabei Hilfe benötigen.
Dieses Snippet stellt sicher, dass Kontrollkästchen- und Multiple-Choice-Felder, die das 2-Spalten-Layout verwenden, das Layout auch in der mobilen Ansicht beibehalten.
Das war's! Jetzt wissen Sie, wie Sie das Spaltenlayout für Multiple-Choice-Felder (Kontrollkästchen und Multiple Choice) in der mobilen Ansicht anpassen können.
Möchten Sie weitere Möglichkeiten zur Anpassung von WPForms-Feldern kennenlernen? Sehen Sie sich unser Tutorial zum [Hinzufügen einer Option "Alle auswählen" zu einem Kontrollkästchenfeld in WPForms](https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/ "Hinzufügen einer Option "Alle auswählen" zu einem Kontrollkästchenfeld in WPForms") an.
**Kategorien:** Tutorials
**Schlagwörter:** CSS, Felder
---