Moin
@Dieter,
danke für Deine Beteiligung
... die
@media Anweisung bezieht sich in der Pixelangabe ja nicht auf die Breite des Inhaltes sondern auf die
Breite des Displays der verwendeten Gerätes, das hat also damit nichts zu tun.
@Thomas,
... eigentlich war mein Gedanke oben schon in die richtige Richtung, nur habe ich den Inhalt falsch gesetzt. Man sollte so etwas eben immer selbst erst mal testen, sonst macht man schnell Fehler
Natürlich muss die maximale Breite ("max-width") des Blocks verringert werden. Das kannst Du in Prozent (hier im Beispiel 80% der Display-Breite vom Handy) oder auch in Pixeln angeben (also z.B. 280px). Prozent ist eigentlich meist besser, da ja auch Handys unterschiedliche Display-Breiten haben.
Hier habe ich es mal im obersten Header-Block mit in die CSS eingetragen:
https://www.mobirise-tutorials.com/GridM5/
Diese
@media Anweisung schreibst Du noch ganz unten in den Bereich "CSS Editor" vom "Code Editor" dieses Blocks hinzu:
Code: Alles auswählen
@media (max-width: 767px) {
.content-container {
max-width: 80%;
}
}
Du kannst das auch ebenso gut an die bereits (unten) vorhandene
@media Anweisung mit ran schreiben. 575px ist nur eine kleinere, maximale Breitenangabe. Mein Handy hat im Querformat z.B. eine Breite von 726px und dann würde diese
@media Anweisung von maximal 575px eben nicht mehr im Querformat wirken.
Code: Alles auswählen
@media (max-width: 575px) {
.content-container {
padding: 3rem 24px;
max-width: 80%;
}
}
Siehe auch die
Breakpoints (@media Haltepunkte) für das Framework "
Bootstrap 5" hier:
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Zum Verständnis:
In der Original-CSS ist die maximale Breite der
class="content-container" (Inhalt vom Container) mit 900px angegeben und die sind natürlich dann viel breiter als das Handy-Display (normlerweise ist ein Handy-Display hochkant so 360px breit), insofern konnte man dann die weiße "Border" (Borten-Linien), links und rechts an diesem Container, gar nicht mehr sehen, da dieser Container dann in seiner vollen Breite am Handy angezeigt wird:
Code: Alles auswählen
.content-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 54px 60px;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}
P.S.:
nur wen es interessiert, denn das kann manchmal sehr nützlich sein, um mal die
Display-Breite seiner Geräte zu sehen.
Ich habe auf dieser Testseite ein
JavaScript eingebaut, das die Display-Breite anzeigt (unter dem Header-Block):
https://www.mobirise-tutorials.com/Test ... content7-y
Wie ich das gemacht habe, beschreibe ich hier:
viewtopic.php?t=586