Float box design + script fehler suche.

Andrin.Spitzer

Erfahrenes Mitglied
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.
Code:
.wrapper-horizontal {
    display: flex;
    width: 60em;
    margin: 4em auto;
    padding: 2em;
    background-color: white;
}
Danke
 

Andrin.Spitzer

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Habe es so gemacht:

Code:
@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
 

Sempervivum

Erfahrenes Mitglied
Um die Optik zu verbessern, musst Du die Elemente mit Flex untereinander anordnen und zentrieren:
Code:
.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:
Code:
@media screen and (max-width: 800px)
.wrapper-horizontal {
    display: flex;
    flex-direction: column;
    width: auto;
}
Dann sieht es schon wesentlich besser aus.