.container should not be partially hidden behind .navbar
This commit is contained in:
1 parent
3267b6a6a3
commit
0891a60beb
1 file changed
+23
-4
+23
-4
@@ -17,11 +17,16 @@ body {
|
|||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Fixe Navbar überlappt den Kartenanfang – 80px
|
||||||
|
* Freiraum halten (alle Modi, auch Portrait).
|
||||||
|
*/
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: min(700px, calc(100% - 32px));
|
width: min(700px, calc(100% - 32px));
|
||||||
|
padding-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
@@ -264,6 +269,16 @@ button, .button {
|
|||||||
color: #1a7f37;
|
color: #1a7f37;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* scrollIntoView() richtet das Ziel am Viewport-Rand
|
||||||
|
* aus, wo die fixe Navbar liegt. scroll-margin-top hält
|
||||||
|
* das Ziel unter der Navbar frei.
|
||||||
|
*/
|
||||||
|
.adhoc-result,
|
||||||
|
.success-message {
|
||||||
|
scroll-margin-top: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
.adhoc-link {
|
.adhoc-link {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -322,16 +337,14 @@ button, .button {
|
|||||||
@media (max-width: 600px),
|
@media (max-width: 600px),
|
||||||
(orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
|
(orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
|
||||||
body {
|
body {
|
||||||
/* Navbar ist hier einzeilig */
|
|
||||||
padding-top: 80px;
|
|
||||||
/*
|
/*
|
||||||
* Padding statt margin-bottom an der Karte:
|
* Padding statt margin-bottom an der Karte:
|
||||||
* Ränder am Scroll-Ende werden vom Scrollbereich
|
* Ränder am Scroll-Ende werden vom Scrollbereich
|
||||||
* nicht erfasst, Padding schon.
|
* nicht erfasst, Padding schon.
|
||||||
*/
|
*/
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
/* 80px Navbar + 10px unten abziehen */
|
/* 10px unten abziehen */
|
||||||
min-height: calc(100vh - 90px);
|
min-height: calc(100vh - 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
@@ -354,6 +367,12 @@ button, .button {
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Navbar ist hier flacher als am Desktop */
|
||||||
|
.adhoc-result,
|
||||||
|
.success-message {
|
||||||
|
scroll-margin-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
button.nav-toggle {
|
button.nav-toggle {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user