Text eines Buttons wird abgeschnitten, sobald Button kleiner wird

  • Hallo,

    für meine Seite nutze ich an verschiedenen Stellen "Contact Form 7" Kontaktformulare, bei welchen ich den Submit-Button mittels css anpasse. Ein Beispiel ist z.B. die Seite https://www.quality-lifestyle.de/kontakt/

    Ist das Browserfenster genügen groß, so ist auch alles wie gewünscht. Mache ich jedoch das Browserfenster kleiner oder öffne die Seite Beispielsweise auf meinem Handy, so wird der Buttontext (In diesem Fall "Unverbindlich zum kostenlosen Vorgespräch anmelden") einfach abgeschnitten. Dieser passt sich nicht der Button-Größe an, so dass nun in der Ansicht auf Mobilgeräten der Knopf zwar schön an die Auflösung angepasst wird, vom Text jedoch nur "Unverbindlich zum koste" sichtbar ist.

    Ich steh etwas auf dem Schlauch, da in der CSS die Schriftgröße ja relativ angegeben ist und ich dachte damit passt die sich an

    Irgendjemand eine Idee?

    • Anzeige

    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

  • Die Schriftgröße 120% bedeutet 120% von der "Basisschriftgröße".
    Nicht 120% der Breite deines Buttons, was ja auch blöd wäre, denn dann wären ja immer 20% nicht sichtbar ;)

    Letztendlich brauchst du hier wohl einen media query.
    Du solltest das Bild auf kleineren Breiten über das Formular stellen, nicht daneben.

    Dein Quality Webdesign Development Consultant.

    Rechnung kommt dann per Post ;P

    Nachtrag: Noch mehr stören würde mich übrigens, dass nicht das ganze Formular sichtbar ist, sondern man scrollen muss, und nicht mal ein Scrollbalken sichtbar ist.

    "Gewinnspiele, Gutscheinaktionen, Werbung, insbesondere kommerzielle, ist sowohl in Signaturen als auch Beiträgen ohne vorherige Genehmigung des Betreibers verboten. Bei Zuwiderhandlung behalten wir uns vor die Beiträge zu löschen und den entsprechenden User zu sperren." Auszug aus den WPDE.org Nutzungsbedingungen

  • Du könntest auch einfach den Button-Text umbrechen lassen, also so z. B.

    Code
    .wbounce-modal form input[type=submit]{white-space:normal;}


    Dennoch würde ich ebenfalls das von am3 umsetzen und mit media queries den Text auf mobilen Geräte anpassen.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!