.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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fixe Navbar überlappt den Kartenanfang – 80px
|
||||
* Freiraum halten (alle Modi, auch Portrait).
|
||||
*/
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: min(700px, calc(100% - 32px));
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -264,6 +269,16 @@ button, .button {
|
||||
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 {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
@@ -322,16 +337,14 @@ button, .button {
|
||||
@media (max-width: 600px),
|
||||
(orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
|
||||
body {
|
||||
/* Navbar ist hier einzeilig */
|
||||
padding-top: 80px;
|
||||
/*
|
||||
* Padding statt margin-bottom an der Karte:
|
||||
* Ränder am Scroll-Ende werden vom Scrollbereich
|
||||
* nicht erfasst, Padding schon.
|
||||
*/
|
||||
padding-bottom: 10px;
|
||||
/* 80px Navbar + 10px unten abziehen */
|
||||
min-height: calc(100vh - 90px);
|
||||
/* 10px unten abziehen */
|
||||
min-height: calc(100vh - 10px);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -354,6 +367,12 @@ button, .button {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Navbar ist hier flacher als am Desktop */
|
||||
.adhoc-result,
|
||||
.success-message {
|
||||
scroll-margin-top: 80px;
|
||||
}
|
||||
|
||||
button.nav-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user