Responsive Grid, erster Float verhindern

[Birden]

Guten Morgen

Layout-Builder und Responsive Grid sind kombiniert, durch das Responsive Grid wird das Grid ja schon ab unterhalb 979px gefloatet. Möchte aber, daß dies erst ab 768px geschieht. Hab dies auch schon bei einer anderen Seite hinbekommen, aber irgendwie bringe ich es nicht mehr hin.

Macht man dies nicht indem man mittels "@media(min-width:768px) and (max-width:979px)" das Floaten überschreibt?

[BugBuster]

Im Prinzip schon, du muss allerdings alle Angaben darin überschreiben.

[Birden]

Ich hab da wieder ein Denkfehler drin, muß es wohl anders machen …

Wrapper wird unterhalb einer Browserbreite von 979px von 960px auf 744px reduziert. Dies in dem sich das Hauptfeld verschmälert. (Das Layout hat Kopfzeile, Linke Spalte und Hauptfeld.) Nur schaut es jetzt unschön aus, wenn im Hauptfeld die Gridspalten die Fläche in der Breite nichtmehr ausfüllen. Da die Grids wegen Platzmangel gefloatet werden.
Es hat also mehr Sinn wenn gleichzeitig mit der Reduzierung der Breite von 960px auf 744px die Breite der Grids aufgehoben werden, damit sie sich in voller Breite untereinander anordnen können.

Wo muß ich da wieder drehen, um es so hinzubekommen?

[BugBuster]

Die Breite der Grids werden doch mit angepasst?
Wenn du das nicht willst, dann schau die an wie die nächste Stufe erfolgt und mach es genau so.

[Birden]

Die Breite der Grids werden doch mit angepasst?

Nicht bei der reduzierung von 960px auf 744px

[BugBuster]

Ähh, was?
Also, hier werden die Grids in der ersten Stufe angepasst: "Reduce the grid column widths"
https://github.com/contao/core/blob/....css#L108-L131

Und hier in der zweiten Stufe werden die Breiten auf auto gesetzt
https://github.com/contao/core/blob/....css#L170-L186

[Birden]

Du hast was die Reduzierung betrift recht!


Frag mich nur wo dann der Hund vergraben liegt.

Ich bringe ins Hauptfeld drei grid3 nebeneinander, grid9 füllt die ganze Breite aus. Nach der Reduzierung fehlt grid9 den Platz. Bei den grid3 wird das dritte Grid nach unten geschoben, obwohl diese rein rechnerisch nebeneinander Platz haben müßten.

[BugBuster]

zufällig beim IE7 ?

[Birden]

IE7, gibts den noch?


Bei Firefox 18, Opera 12 und IE10, sieht es gleich aus.

[BugBuster]

Ich hatte beim IE7 oder IE8 das Problem, das der beim Rechnen sich um einen Pixel verrechnet hat und dadurch alles verschoben wurde, es war ein Pixel zu viel.

[BugBuster]

Bei der Kombination von Layout Builder und Grid muss man aufpassen, da das Grid natürlich nur seine Spalten verkleinert. Die Layout Spalte ist davon nicht betroffen.

[Birden]

Daher sag ich ja, es wäre gut wenn die bei der ersten Reduzierung die Grids, in kompination mit dem Layout Builder, in voller Breite untereinander anordnet würde. Auf der anderen Seite möchte man das Layout so lang wie möglich erhalten, so hat auch die Reduzierung der Grid Breiten ihren Sinn. Versuchte nun die Grit-Breiten [@media (min-width:768px) and (max-width:979px)] zu überschreiben, so daß sie es bei dem Projekt ins Hauptfeld paßt. Aber die wollen sich nicht überschreiben lassen.

Ja, die CSS ist richtig eingebunden. Denn die Anpassungen in der Kopfzeile funktionieren.

[Birden]

Ein »!important« war die lösung.