Druckbare Version
Hallo zusammen,
auf einem großen Bildschirm sollen z.B. 5 Galerie-Vorschaubilder nebeneinander angezeigt werden, auf einem Mobilgerät z.B. 3 Bilder pro Reihe. Wenn ich nun die Größen und Abstände mit CSS jeweils festlege, ist mir immer die verpflichtende Eingabe der Vorschaubilder pro Reihe im Backend "im Weg". Wie kann man das umgehen und die Anzahl rein über CSS steuern?
Danke für Eure Hilfe
Du hast dir die Antwort schon gegeben: Rein über CSS. Alles was Contao da macht ist, den einzelnen Listenelementen bestimmte Klassen zuzuweisen und über das CSS anhand der vergebenen Klassen dafür zu sorgen, dass bei Auftreten einer bestimmten Klasse das float gecleart wird. Schau es dir mal in den Entwicklertools an, wie die Klassen aussehen und welches CSS es dazu gibt und was davon ggf überschrieben werden muss.
Damit es gar nicht erst zur Anwendung kommt und somit auch nicht überschrieben werden muss, kannst du auch die Klassen aus dem Template rauswerfen. Deine eigene Anzahl pro Reihe kannst du z.B. mit nth-child realisieren und dort die entsprechenden Styles für das erste, letzte Element einer Reihe zuweisen.
Edit: Hier der entsprechende Auszug aus der layout-uncompressed.css, da wird eigentlich nur eine Klasse für das erste Element einer Reihe benutzt (col_first).
Code:/**
* Format the Contao image galleries (now rendered as unordered lists)
*/
.ce_gallery > ul {
margin:0;
padding:0;
overflow:hidden;
list-style:none;
}
.ce_gallery > ul li {
float:left;
}
.ce_gallery > ul li.col_first {
clear:left;
}
Du kannst es ja (per CSS) auch so steuern, dass by default immer die Angabe aus dem Backend genommen wird (für die Desktop Ansicht, quasi), aber ab gewissen Break Points dann fix von dir vorgegebene Breiten.
Danke Euch für die Unterstützung. Die eigene Anzahl mit nth-child formatieren war für mich hier der entscheidende Tipp...So werd ich es probieren...