Probleme mit dem Design bei Drehen auf Handy oder Tablet

[Snake20x]

Geb dir nachher Feedback wenn ich zuhause bin! Werde alle drei testen.
DANKE! Ich blick das mit den Viewports auch nur bedingt. Trotzdem vielen lieben DANK

 

[basti1012]

Ode mal die CSS testen, die hier unten weiter gezeigt wird
https://bubblin.io/blog/notch

 

[Snake20x]

Hey @basti1012 Also die "Contain" und "auto" belassen es als Container mit weißen Balken!
Cover scheint es zwar nach außen aber dann halt mit der Schrift.

Werd mich dem CSS mal wenden ;-) Hast mir ja genug Lernstoff gegeben!
Meld mich später wenn ich mehr infos habe.

 

[Snake20x]

@basti1012 hey...
Erstmal danke für die ganze Lektüre! Aber irgendwie stell ich mich grad doof an!
Die beste Variante ist aus meiner Sicht diese.

Du machst ins HTML das
Vor die Navbar das!
<main class="shrink center">

und unter den Footer
</main>

Und ins CSS machst das , damit er es verkleinert.

@media only screen and (orientation: portrait) {
body {
.shrink {
width: 95%;
}
}
}

@media only screen and (orientation: landscape) {
body {
.shrink {
width: 90%; /* Shrink a little more to avoid the notch. */
}
}
}


.center {
text-align: center;
margin: 0 auto;
}


Aus meiner Sicht, wenig Code, sehr effizient und sollte das Prob lösen! Aber er macht NIX!
Mach ich was falsch?

Im Viewport hab ich natürlich das:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

damit er es ganz nach außen zieht.

Und Cache natürlich auch geleert!


Danke schonmal im voraus