Refactor media queries for spirit-info in index.html

This commit is contained in:
2025-05-28 19:55:58 +02:00
parent 1995cbd7f4
commit 684ce37814

View File

@@ -112,15 +112,29 @@ canvas {
}
}
/* "Mobile Portrait" (Hochformat und schmal) */
@media (max-width: 619px), (orientation: portrait) {
/* Hochformat (Mobile) */
@media (max-width: 619px) and (orientation: portrait) and (pointer: coarse) {
#spirit-info {
width: 90vw;
max-width: 98vw;
min-width: 0;
max-height: 82dvh;
padding: 8vw 4vw 4vw 4vw;
}
}
/* Hochformat (Desktop) */
@media (max-width: 619px) and (orientation: landscape), (max-width: 619px) and (pointer: fine) {
#spirit-info {
width: 90vw;
max-width: 400px;
min-width: 0;
max-height: 700px; /* dynamic viewport height */
max-height: 700px;
padding: 8vw 4vw 4vw 4vw;
}
/* Hochformat (Mobile / Desktop) */
@media (max-width: 619px), (orientation: portrait) {
.spirit-info-flex {
flex-direction: column;
gap: 16px;