Beim Kontaktformular auf https://versichert.io/contact/ funktioniert die Desktopansicht wie gewünscht. In der Mobile-Ansicht bricht die Anzeige wie gewünscht um (alle Formularfelder untereinander statt zeilenweise gepaart).
Aber: Die Eingabefelder ragen über den rechten Rand des umschließenden div.wps-form Containers.
Ich komme einfach nicht zur Lösung, die Formularfelder innerhalb des div.wps-form in der Mobile-Ansicht zu halten.
(zur Lösung setze ich eine Paypal-Kaffeespende aus)
Code
div.wps-form {
width: 100%;
margin: 0 auto;
background:#e1edef;
}
.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%;
}
div.wps-form input[name="surname"],
div.wps-form input[name="prename"],
div.wps-form input[name="email"],
div.wps-form input[name="telefon"],
div.wps-form textarea {border:#eee 2px solid;font-size:1.3em;padding:4px;color:#193cae;margin-top:0.2em;}
div.wps-form input[type="submit"]
{
display:block;
background-color:#47b001;
color:#fff;
font-family:arial;
font-size: 1.4em;
width:70%;
padding:0.5em;
margin:0 auto;
text-align:center;
border-radius: 10px;
border:0px;
}
div.wps-form input[type="submit"]:hover
{
background-color:#3c9601;
}
.wps-form label {font-size:1.2em; font-weight:600;color:#646464;}
.wps-form ::placeholder {font-size:0.9em; font-weight:300;color:#8c8c8c;}
/* custom checkbox styling for contact form 7 checkbox */
span.wpcf7-list-item {
display: inline-block;
margin: 0;
}
.wpcf7 .wpcf7-list-item {
display: block;
margin-bottom: 10px;
}
.wpcf7-acceptance label {
position: relative;
cursor: pointer;
}
.wpcf7-acceptance input[type=checkbox] {
/*position: relative;*/
position: absolute;
visibility: hidden;
width: 30px;
height: 30px;
top: 0;
left: 0;
}
.wpcf7-acceptance input[type=checkbox] + span {
/*border: 8px solid red;*/
}
.wpcf7-acceptance input[type=checkbox] + span:before {
display: block;
position: absolute;
content: '';
border-radius: 5px;
height: 26px;
width: 26px;
top: 0px;
left: 0px;
border: 3px solid #48a100;
}
.wpcf7-acceptance input[type=checkbox] + span:after {
display: block;
position: absolute;
content: "\2713";
height: 30px;
width: 30px;
top: 0;
left: 0;
visibility: hidden;
font-size: 18px;
text-align: center;
line-height: 30px;
color:#193cae;
}
.wpcf7-acceptance input[type=checkbox]:checked + span:before {
background: transparent;
}
.wpcf7-acceptance input[type=checkbox]:checked + span:after {
visibility: visible;
}
.wpcf7-list-item-label {
margin-left: 40px;
display: inline-block;
font-size: 0.8em;
font-weight: 400;
line-height:1.2em;
}
@media (min-width: 769px) {
div.wps-form {width:80%;}
}
/* Notebook / Desktop */
@media only screen and ( min-width: 600px ) {
.wps-form-row {
flex-direction: row;
}
.wps-form-column {
padding: 0.5rem 1rem;
}
}