6. Mobile Layout

Seite 8 von 25

6. Mobile Layout (der wichtige Teil)

@media (max-width:900px){

.hauptbereich{
flex-direction:column;
}

.inhalt{
width:100%;
}

.seite{
width:100%;
}

/* Burger anzeigen */
.burger{
display:block;
}

/* Menü verstecken */
.navigation{
display:none;
background:var(--hauptfarbe);
padding:20px;
}

.navigation ul{
flex-direction:column;
}

/* Menü sichtbar wenn aktiv */
.navigation.aktiv{
display:block;
}

.hero{
padding:40px;
font-size:18px;
}

}