fix navToggle in landscape mode
This commit is contained in:
1 parent
1a00e7430a
commit
faa5f428d0
1 file changed
+25
-36
+25
-36
@@ -289,41 +289,6 @@ button, .button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Schmale Bildschirme: Navbar umbrechen lassen,
|
|
||||||
* Abstände und Logo verkleinern.
|
|
||||||
*/
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
/* 130px räumen die fixe Navbar frei */
|
|
||||||
padding-top: 130px;
|
|
||||||
/* min-height gilt für die Content-Box: Navbar-Freiraum
|
|
||||||
* abziehen, sonst sitzt die Karte unter der Mitte */
|
|
||||||
min-height: calc(100vh - 130px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
top: 8px;
|
|
||||||
left: 4%;
|
|
||||||
width: 92%;
|
|
||||||
padding: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-bar img {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, .button {
|
|
||||||
padding: 10px 14px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sehr schmale Telefone: noch kompakter */
|
/* Sehr schmale Telefone: noch kompakter */
|
||||||
@media (max-width: 400px) {
|
@media (max-width: 400px) {
|
||||||
.navbar {
|
.navbar {
|
||||||
@@ -350,14 +315,38 @@ button, .button {
|
|||||||
/*
|
/*
|
||||||
* Phone: Navbar-Aktionen in beiden Ausrichtungen
|
* Phone: Navbar-Aktionen in beiden Ausrichtungen
|
||||||
* hinter dem Hamburger-Button als Dropdown anzeigen.
|
* hinter dem Hamburger-Button als Dropdown anzeigen.
|
||||||
|
*
|
||||||
|
* Landscape-Phone: Viewport breiter als 600px – kurze
|
||||||
|
* Seite (Höhe) und Touch-Eingabe entscheiden.
|
||||||
*/
|
*/
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px),
|
||||||
|
(orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
|
||||||
body {
|
body {
|
||||||
/* Navbar ist hier einzeilig */
|
/* Navbar ist hier einzeilig */
|
||||||
padding-top: 80px;
|
padding-top: 80px;
|
||||||
min-height: calc(100vh - 80px);
|
min-height: calc(100vh - 80px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
top: 8px;
|
||||||
|
left: 4%;
|
||||||
|
width: 92%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-bar img {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .button {
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
button.nav-toggle {
|
button.nav-toggle {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user