Feedback gewünscht CSS-Problem mit Formular

[dortcom]

Hallo zusammen,

ich habe ein Problem mit meinem Optin-Formular. Und zwar stehen die Formularfelder über den Button hinaus:

Zu sehen auf: http://www.agile-master.de/about/

Ich habe mir im Moment damit beholfen, dass ich die Formularfelder auf width: 97% gesetzt habe. Das zieht sie zwar auf der Desktopansicht zusammen, aber auf dem Handy (einfach Browser mal klein ziehen) stehen die Felder wieder hinaus.

Was ich gerne hätte, ist eine generische Lösung, so das auf jeder Ansicht die Felder und der Button in gleicher Größe untereinander stehen.

Ich würde mich über Hilfe freuen.

Danke und Grüße
dortcom

 

[Tronjer]

Waren die Styles alle vom Plugin vorgegeben oder hast du sie teilweise selber erstellt? Von den 97% mal abgesehen.

Das Problem liegt im Box-Modell von CSS. Wenn ein Element width 100% plus padding-left/-right 10px hat, ragt es über den Parent hinaus.

Lösung: Die 97% bei den Inputs löschen und statt dessen box-sizing: border-box hinzufügen.

 

[dortcom]

Hallo Tronjer,

danke für den Tipp. Das war´s.

Die Styles sind teilweise von mir. Das Plugin lädt die Styles direkt vom Cleverreach über die API und fügt diese als Inline-Styles ein. Das ist unschön.

Im Moment ist das für mich ein Workaround, weil ich auf die AJAX-Funktionen des Plugins nicht verzichten will.

Hast du eine bessere Idee? Ich freue mich über jeden Tipp.

Danke und schöne Grüße
dortcom