Contact Form 7

Hallo zusammen,

ich versuche gerade mich mal mit css und contact form 7. ich möchte Felder mehrspaltig gestalten. Nun habe ich folgendes CSS im Netz gefunden.

Zuerst das CSS

.wps-form {
width: 100%;
margin: 0 auto;
}

.wps-form-row {
display: flex;
flex-direction: column;
width: 100%;
}

.wps-form-row .wpcf7-form-control {
width: 100%;
}

.wps-form-column {
flex: 1;
padding: 0.5rem 0;
width: 100%;
}

/* Notebook / Desktop */
@media only screen and ( min-width: 48em ) {
.wps-form-row {
flex-direction: row;
}

.wps-form-column {
padding: 0.5rem 1rem;
}
}



Nun das Ganze im Formular:


<div class="wps-form">
<div class="wps-form-row">
<div class="wps-form-column">
<label>Name</label>
[text* your-name]
</div>
<div class="wps-form-column">
<label>E-Mail-Adresse</label>
[email* your-email]
</div>
</div>

<div class="wps-form-row">
<div class="wps-form-column">
<label>Betreff</label>
[text your-subject]
</div>
</div>

<div class="wps-form-row">
<div class="wps-form-column">
<label>Nachricht</label>
[textarea your-message]
</div>
</div>

<div class="wps-form-row">
<div class="wps-form-column">
[submit "Senden"]
</div>
</div>
</div>


So alles gut und es scheint zu funzen. Allerdings gibt er mir zu viele Leerzeilen zwieschen den Felder aus.
Hat jemad eine Ahnung wie man das ohne große Abstände hinbekommt?
Vernutlich liegt das am flex.

 

Klar, natürlich
http://www.mh-mediaweb.de/test/

 

Woher kommen die <p> Tags? Im CSS ist das nicht ersichtlich. Wie bekomme ich die raus? Oder muss ich mir ein eigenes CSS basteln?

 

Hallo,

Danke für die Antwort. Mit der Browser Entwickler Konsole arbeite ich schon länger. Aber manchaml bist Du so verbohrt das Du das einfache nicht siehst. Ich schaue mir das noch mal in Ruhe an. Die 100px zwischen Überschrift und der section sind von mir so eingestellt. Also Konzentration auf das CF7-Formular.

Danke

 

Problem gelöst! Man muss eben erst wachgerüttelt werden.


.wpcF7 p {
margin-top:-30px;
}

 

Ja, Du hast Recht Ist nicht gerade die optimale Lösung. Aber besser als nichts. den <p> Tag bekomme ich sonst nicht anders heraus. Daher das umständliche.

Alternative:

.wpcF7 p {
margin-bottom: 0px;
}