Im Rahmen der Anpassung verschiedener Foren an ein einheitliches Layout wurden die Styles von dem „dreifragezeichen-board.de“ und dem „bandenboard.de“ mit dem Design des „scifanture.de“-Boards harmonisiert. Ein weiteres Board, das „board.bastbox.de“, wurde an die spezifischen Anforderungen der Bastbox selber angepasst.
Anpassungen des „Dreifragezeichen“-Boards und des „Bandenboards“ an das „SciFanture“-Board:
Um das Layout des „Dreifragezeichen“-Boards und des „Bandenboards“ an das Design des „SciFanture“-Boards anzupassen, wurden folgende Änderungen vorgenommen:
Maximale Breite festgelegt: Die maximale Breite des Containers wurde auf 1800px festgelegt, um sicherzustellen, dass der Inhalt bei größeren Bildschirmen nicht zu breit wird. Dies sorgt für eine bessere Lesbarkeit und verhindert, dass der Inhalt auf großen Monitoren zu weit auseinandergezogen wird.
CSS-Regel:
.wrap {
max-width: 1800px; /* Maximale Breite */
width: 95%; /* 95 % der Breite des Containers */
margin: 0 auto; /* Zentrierung des Containers */
}
Flexible Breite: Der Container wurde auf 95% der Bildschirmbreite gesetzt, was bedeutet, dass der Inhalt flexibel bleibt und sich je nach Bildschirmgröße anpasst. Diese Anpassung sorgt für eine visuell ansprechende Darstellung auf verschiedenen Bildschirmgrößen.
Diese Änderungen wurden durchgeführt, um die Layouts der beiden Foren zu vereinheitlichen und die Darstellung auf größeren Bildschirmen zu optimieren. Der max-width-Wert von 1800px stellt sicher, dass die Foren-Layouts auf großen Monitoren ansprechend und gut lesbar bleiben.
Anpassungen des „Board.Bastbox“ an die Bastbox:
Das „board.bastbox.de“ wurde speziell an die Anforderungen der Bastbox selber angepasst. Der Fokus lag hier auf der maximalen Breite des Containers, um die Darstellung an die typischen Layouts von WordPress anzupassen. Die maximal erlaubte Breite wurde auf 1300px erhöht, um das Layout bei größeren Bildschirmen zu erweitern und gleichzeitig die Flexibilität auf kleineren Geräten zu erhalten.
Maximale Breite auf 1300px erhöht: Diese Anpassung sorgt dafür, dass der Inhalt auf Bildschirmen größer als 1300px breiter dargestellt wird, ohne die Lesbarkeit zu beeinträchtigen. Auf kleineren Bildschirmen bleibt der Inhalt jedoch flexibel und passt sich der Bildschirmgröße an.
CSS-Regel:
.wrap {
max-width: min(95%, 1300px); /* Maximale Breite auf 1300px begrenzt */
width: 95%; /* 95 % der Breite des Containers */
margin: 0 auto; /* Zentrierung des Containers */
}
Media Query für kleinere Bildschirme: Zusätzlich wurde eine Media Query für Bildschirme kleiner als 1320px hinzugefügt. Diese sorgt dafür, dass der Container bei kleineren Bildschirmen eine flexiblere Breite von 90% bis 99% einnimmt, was die Lesbarkeit auf mobilen Geräten verbessert.
CSS-Regel für Media Query:
@media only screen and (max-width: 1320px) {
.wrap {
width: 99%; /* Reduziert die Breite auf mobilen Geräten */
}
}
Diese Änderungen sorgen dafür, dass das „board.bastbox.de“ besser mit den Layouts von der Bastbox kompatibel ist, insbesondere auf größeren Bildschirmen, während es gleichzeitig auf kleineren Geräten eine angenehme Benutzererfahrung bietet.
Zusammenfassung:
- Die maximale Breite des Containers wurde für das „Dreifragezeichen“-Board, das „Bandenboard“ und das „Scifanture“-Board auf 1800px gesetzt, während das „Board.Bastbox“ auf 1300px angepasst wurde.
- Der flexible Container mit 95% der Bildschirmbreite sorgt für eine optimale Darstellung auf verschieden großen Bildschirmen.
- Durch Media Queries wird sichergestellt, dass die Breite auf kleineren Geräten (insbesondere Smartphones und Tablets) angepasst wird, um eine benutzerfreundliche Ansicht zu gewährleisten.
- Mit diesen Anpassungen wurden alle Foren-Layouts auf eine einheitliche Darstellung gebracht, wobei gleichzeitig die Anforderungen an die Bildschirmbreite und die Flexibilität auf mobilen Geräten berücksichtigt wurden.
Siehe da … Die Breite der Bastbox und Board.Bastbox …
… und die der 3 Boards ist identisch.
Wenn der Bildschirm schmaler, bleiben die Seitenabstände gleich. Wird der Bildschirm breiter, bleibt die Seitenbreite (Der Container mit dem Inhalt) wie auf den Bildern, lediglich die Seitenränder werden größer. Mit 1300 Pixel bei der Bastbox und den Boards sowie 1800 Pixel bei den Boards maximal (wenn Platz vorhanden ist) sollte es ausreichend dimensioniert sein.
Auf diesem Screenshot sieht es so aus, als würde viel Platz an den Seiten verschenkt. Der Screenshot zeigt jedoch zwei 24-Zoll-Bildschirme nebeneinander (Dualbetrieb in Ultra-Wide), die zudem eine hohe Auflösung haben.