Contact Form 7 responsive Mobilgeräte

Bernd_HOEFKE

Guten Tag,

das CF 7 wird in der Ansicht auf dem Handy oder Tablet leider nicht korrekt angezeigt.
Ich komme bei dem Thema nicht weiter, kann mir jemand behilflich sein?

Vielen Dank
Bernd

https://hoefke-booking.de/

Code

/* Contact Form 7 Styles */


    /* Fundament */


.wpcf7 {
    
    background-color: #F0F0F0;
    
    padding: 15px 45px;
    border: 10px solid #2b6dfc;
    
    
    margin-top: 25px;
    text-align: center;
    
}


    /* Textfelder-Ausrichtung */


.wpcf7-form {
    
    margin-left: 50px;
    
    margin-right: 100px;
    margin-top: 25px;
}


/* Transparent Header off */


.header {
    
    display: none;
}


    /* Dropdown Artist */


.wpcf7-select {
    
    width: 30%;
    
    margin-top: 25px;
    
    margin-left: 150px;
    margin-right: 150px;
    
    padding: 0 .75em;
    display: inline-block;   
}


    /* Datum */


.wpcf7 input[type="date"] {
    
    width: 30%;
    
    margin-left: 150px;
  margin-right: 150px;
}


    /* Ort/Dauer/Name/Betreff */


.wpcf7 input[type="text"] {
        
    width: 30%;
    
    margin-left: 150px;   
    margin-right: 150px;
}


    /* E-Mail */


.wpcf7 input[type="email"] {
        
    width: 30%;
    
    margin-left: 150px;   
    margin-right: 150px;
}


    /* Phone */


.wpcf7 input[type="tel"] {
        
    width: 30%;
    
    margin-left: 150px;   
    margin-right: 150px;
}


    /* Nachricht */


.wpcf7-textarea {
    
    width: 30%;
    
    margin-right: 150px;
    margin-left: 150px;
}


    /* Datenschutz */


.wpcf7 input {
  
    width: 75%;
}


.wpcf7 .wpcf7-acceptance input {
 
    width: auto;
}   


    /* Senden */


input.wpcf7-form-control.wpcf7-submit {
    
    float: center;
    margin-top: 20px;
    width: 8%;
    margin-left: 100px;
}

Alles anzeigen

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

b3317133

Ergänze am Ende:

CSS

@media only screen and (max-width: 1024px) {
    .wpcf7-form, .wpcf7 input:not([type='checkbox']), .wpcf7 select, .wpcf7 textarea {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

Ergänzung: Code leicht angepasst, Datenschutz Checkbox ausgenommen.

funkygog

Die Angaben passen nicht zu einer Mobil Darstellung
30% von der Breite und dann links und rechts 150px Abstand kann nicht klappen.

Auf die schnelle würde ich margin-left und right rausnehmen
und statt width: 30% lieber:
max-width: 300px;

HTH

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Contact Form 7 responsive Mobilgeräte

Jetzt mitmachen!