Die .dropdown-Auswahl belegen 25% und das Telefon belegt einen Platz von 75%. Müssen CSS vollständig zur Positionierung verwenden. Versuchte verschiedene Techniken, nicht erfolgreich. PrettyPrint-Override ">
Code: Select all
/* Main container that holds all the input fields */
.contactFormContainer .field__group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
/* Ensure each .dropdown-select and .phone div takes up 50% of the container width */
.contactFormContainer .dropdown-select,
.contactFormContainer .phone {
display: flex;
flex-direction: column;
width: calc(50% - 5px);
/* Make sure each takes up 50% of the space with 5px margin */
}
/* Ensure input fields inside dropdown-select and phone take full width */
.contactFormContainer .dropdown-select__input,
.contactFormContainer .phone__container input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* The .text divs remain as block-level elements */
.contactFormContainer .text {
display: block;
margin-bottom: 10px;
}
/* Media Query for smaller screens */
@media (max-width: 768px) {
.contactFormContainer .field__group {
flex-direction: column;
/* Stack everything vertically on small screens */
}
.contactFormContainer .dropdown-select,
.contactFormContainer .phone {
width: 100%;
/* Full width for small screens */
}
}< /code>
Personal eMail 1
Personal eMail 2
Personal eMail 3
Mobile No. 1
Mobile No. 2
Mobile No. 3
Mobile No. 4
Mobile No. 5
Mobile No. 6