WP-Form wird in mobiler Ansicht zu breit ausgegeben

KatjaMMM

Liebe WP-Spezialisten

Ich hab auf meiner Seite http://www.messora.ch jeweils ganz unten ein WP-Form für die NL-Anmeldung. Das hat alles mal prima auf allen Ansichten (Desktop bis Mobile) ausgesehen. Ich weiss nicht wann und wie es passiert ist, aber jetzt ist's auf mobile zu breit.

Ich hab versucht im WP-Forms Editor die Felder mit % anzupassen (hab ich wieder gelöscht) und ich hab versucht ein zusätzliches CSS zu geben. Funktioniert beides nicht. Ich hab keine Ahnung, wo ich was verändern müsste.

Weiss jemand Hilfe? Ganz herzlichen Dank!

Hier der CSS-Code (ist noch drin):
.wpforms-container { max-width: 100%; width: 100% !important; box-sizing: border-box; } .wpforms-form input, .wpforms-form select, .wpforms-form textarea { max-width: 100% !important; }

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

uha

Dieser Inline-CSS-Code ist das Problem:

Code

#mailpoet_form_1 {
  width: 574px;
}

Mit

Code

#mailpoet_form_1 {
  width: 100%;
}

sollte das Problem behoben sein.

threadi

Ich sehe keine Verwendung vom Plugin WP Form bei dieser Website, aber vom Plugin Mailpoet sehe ich ein Formular. Dort kann man offenbar deinen Newsletter abonnieren. Meinst du das? Wenn ja, dann weiß ich nicht wie du auf WP Form kommst. Das Plugin sehe ich bei deiner Seite wie gesagt nicht, auch wird der von dir genutzte CSS-Code rein gar nichts bewirken.

Das Styling für dieses Formular wird durch Mailpoet selbst erzeugt. Das kannst du nicht wie oben beschrieben so einfach anpassen. Ich habe mir das Plugin eben mal diesbezüglich angeschaut. Leider finde ich keine Einstellung, wo man die Breite festlegen kann - laut Code vom Plugin muss es sie aber irgendwo geben. Du hast daher 2 Möglichkeiten:

Wende dich an den Support von Mailpoet um zu Fragen wie man das per Einstellung ändern kann: https://wordpress.org/support/plugin/mailpoet/
Oder verwende einen individuellen CSS-Code, der diese Angabe überlagert. Das hier sollte funktionieren: body #mailpoet_form_1 { width: auto; }

b3317133

KatjaMMM Vermutlich hast Du in Deinem MailPoet Formular Einstellungen eine feste Breite eingestellt. Ändere die Breite zurück auf 100%:

MailPoet > Formulare > Dein Formular > rechte Spalte im Editor > Styles > Form Placement > Others (widget) > Form width > 100 %

KatjaMMM

danke Euch allen, jetzt ist's wieder ok.

tatsächlich hab ich nicht mehr gewusst, dass ich das Formular von WP-Foms nach Mailpoet gewechselt habe. Wie finde ich denn sowas raus? Ich seh das z.B. nicht im Source Code... wie macht Ihr das?

Danke und liebe Grüsse 🙏🏻

threadi

Prima, dass du es lösen konntest.

Im Source Code ist das anhand der Namensgebung von IDs und Klassen für Menschen, die das lesen können, erkennbar. Besser und einfacher wäre für dich aber einfach ein Blick in die Liste deiner Plugins im Backend - da siehst du das schneller als wir von außen

FabianFrost

Das passiert bei WordPress wirklich schnell, besonders wenn man im Laufe der Zeit mehrere Plugins ausprobiert. Ich schaue meistens zuerst in die installierten Plugins, in die Formular-Einstellungen und manchmal in den Browser-Inspektor statt nur in den Quellcode. Viele Plugins laden eigene Skripte oder Klassen nach, weshalb man es nicht immer direkt im HTML sieht. Mit der Zeit erkennt man die typischen Hinweise ganz gut, gerade wenn man sich mit metallischen Gartendekorationen beschäftigt.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

WP-Form wird in mobiler Ansicht zu breit ausgegeben

Jetzt mitmachen!

Tags