Float box design + script fehler suche.

[Andrin.Spitzer]

Ich habe das mal mit dem Container mit dem Kontaktformular getestet, der ja schmaler ist als die Überschriften. Füge ich das padding hinzu, ist erst Mal nichts zu erkennen. Aber der HTML-Inspektor zeigt das padding an. Mache ich jedoch auch den Hintergrund weiß, sieht man auch, dass die Container gleich breit sind.

.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
    padding: 2em;
    background-color: white;
}

Danke

 

[Andrin.Spitzer]

Hay. Bin bald fertig bis auf content.
Hab nur noch mit der funktion des burger menus zu kämpfen da und das die box mit dem ganzen kontakt etc sich nicht anpasst.

Brauche abr noch ne idee. Habe versucht aud optischen Gründen den text mittiger in die box zu bekommen und am Desktop sieht dss auch ned schlecvt aus jedoch auf einem Smartphone stehen dan nur ca 5 Buchstaben auf einer linie. Wie wprdest du lösen?

 

[Sempervivum]

das die box mit dem ganzen kontakt etc sich nicht anpasst.

Am einfachsten wäre das zu lösen, wenn Du den Überschriften links und rechts ein padding von 0 gibst und nur oben und unten die 2em.

 

[Sempervivum]

Habe versucht aud optischen Gründen den text mittiger in die box zu bekommen und am Desktop sieht dss auch ned schlecvt aus jedoch auf einem Smartphone stehen dan nur ca 5 Buchstaben auf einer linie. Wie wprdest du lösen?

Ich nehme an, Du meinst da auch die Box mit dem Kontakt. Da ist es gängige Praxis, auf einem schmalen Bildschirm die beiden Boxen untereinander statt nebeinander anzuordnen. Das kannst Du ja mit einer Mediaquery umschalten, indem Du flex-direction: column; setzt.

 

[Andrin.Spitzer]

Ich nehme an, Du meinst da auch die Box mit dem Kontakt. Da ist es gängige Praxis, auf einem schmalen Bildschirm die beiden Boxen untereinander statt nebeinander anzuordnen. Das kannst Du ja mit einer Mediaquery umschalten, indem Du flex-direction: column; setzt.

Und das passt sich das auch gleich der breite an? Also das sie gleich breit sind wie der rest?

 

[Sempervivum]

Nein, das nicht, untereinander anordnen ist der erste Schritt, die Breite musst Du dann jeweils ebenfalls in der Mediaquery anpassen, so dass sie bei beiden gleich ist.

 

[Andrin.Spitzer]

Habe es so gemacht:

@media screen and (max-width: 800px) {
            /* Hamburger sichtbar machen */
            label.hamburger {
                display: inline-block;
            }
            /* Navigation unsichtbar machen */
            nav ul {
                display: none;
                flex-direction: column;
                align-items: center;
            }
            /* Navigation sichtbar machen, wenn das Hamburger-Symbol gecheckt ist */
            input.hamburger:checked~ul {
                display: flex;
            }
            
            .wrapper-horizontal {
                
            display: flex;
            flex-direction: column;
            }
        }

Funktioniert auch nur sieht es etwas kacke aus XD

 

[Andrin.Spitzer]

dafür funktioniert nun mein Kontakt formular nicht mehr

 

[Sempervivum]

Was heißt "funktioniert nicht mehr"? Bist Du mit dem Layout unzufrieden oder wird kein Email mehr verschickt?

 

[Sempervivum]

Um die Optik zu verbessern, musst Du die Elemente mit Flex untereinander anordnen und zentrieren:

.item-REGISTER {
    flex: 3;
    background-color: whitesmoke;
    text-align: center;
    padding: 2em;
    flex-direction: column;
    display: flex;
    align-items: center;
}

Dieses musst Du natürlich in die Mediaquery einbauen, damit es nur bei schmalem Bildschirm wirksam ist.

Dabei ist uns dann die feste Breite des äußeren Containers im Weg und muss auf auto gesetzt werden:

@media screen and (max-width: 800px)
.wrapper-horizontal {
    display: flex;
    flex-direction: column;
    width: auto;
}

Dann sieht es schon wesentlich besser aus.