Ne ne, die Anweisungen bei #container etc. sind schon korrekt, das ist die besondere HolyGrail-Technik von Contao.
Die Ursache liegt - bei schneller Betrachtung, also keine Garantie auf Korrektheit - darin, dass die Aufteilung des Grid-Systems sich in Bezug auf die linke und rechte Spalte nicht automatisiert auch für die kleinere Auflösungen rein schreibt. Also musst du das manuell machen.
Wenn ich mir das Grid-CSS von Contao ansehe, sehe ich, dass darin neben der Ausgangslage auch ein CSS mit Media Query für kleinere Bildschirmbreiten vorgesehen ist. Du musst also am besten manuell ein vergleichbares Stylesheet anlegen und darin die Angaben für #left und #right ergänzen.
Ungetestet würde ich das ~ so machen:
1. Im Stylesheet-Generator ein neue Stylesheet mit folgenden Einstellungen anlegen:
Name "grid-min768-max979"
In das Feld Media-Query folgendes eingeben: (min-width:768px) and (max-width:979px)
In das Stylesheet folgende CSS-Anweisungen* schreiben:
Code:
#container {
padding-right: 238px;
padding-left: 228px;
}
#left {
width: 228px;
right: 218px;
}
#right {
width: 228px;
}
2. Binde das Layout im Seitenlayout ein und teste, ob das Ergebnis nun besser ist.
* Wie ich auf die Werte komme?
300px ist ursprünglich der Ausgangswert. Dieser ist gleich auf mit dem Wert von .grid3 im Original-Grid-CSS von Contao. Also habe ich in diesem Stylesheet herausgesucht, welcher Wert für .grid3 gilt, sobald das MediaQuery darin auftaucht: 228px;
Dann habe ich mit Firebug geschaut, wie das HolyGrail-Layout + das Grid-System von Contao die Werte in der "Standarddarstellung" berechnen:
"angegebene Breite" = der Wert den du im Seitenlayout für die linke und rechte Spalte eingetragen hast (in deinem Fall ein Wert der mit .grid3 überein stimmt)
- #container bekommt ein padding-left mit genau der angegebenen Breite und ein padding-right mit der angegebenen Breite plus +10px (um den Grid-Abstand auszugleichen der sich an der Stelle auswirkt; wäre zu kompliziert das jetzt an der Stelle zu erklären).
- #left bekommt als width die angegebene Breite und für right die angegebene Breite minus 10px
- #right bekommt als width die angegebene Breite
Hoffe es funktioniert und meine schnelle Erklärung war halbwegs verständlich.
Lesezeichen