Hallo
Mir ist aufgefallen, bei Contao 3 ist beim Statischen Layout das Statische nur noch begrenzt statisch. Schiebt man die Seite mit dem Browser zusammen, wandern die Container untereinander. Wie kann man dies verhindern?
Druckbare Version
Hallo
Mir ist aufgefallen, bei Contao 3 ist beim Statischen Layout das Statische nur noch begrenzt statisch. Schiebt man die Seite mit dem Browser zusammen, wandern die Container untereinander. Wie kann man dies verhindern?
was stört dich daran? Willst du lieber scrollen bei Geräten die mit einer Auflösung <768Pixel Breite kommen?
Ansonsten ist das (leider) fest in der layout builder css enthalten.
In diesem Thread kam schon die selbe Frage auf. Hier mein Loesungsvorschlag: in der entsprechenden CSS Datei die Media Query entfernen. Ist aber keine wirklich schoene Loesung.
@BugBuster: Mich störte wie es einzelnen Teile willkürlich verfremdete.
Vorweg:
Wenn es dich wirklich stört, kannst du das einfach mit einem eigenen Stylesheet überschreiben . Kopier dir die Anweisungen vom Framework für die kleineren Größen, schreib sie in deinem Stylesheet wieder auf die Ausgangswerte zurück und binde das File dann mit den gleichen Media Queries ein. Ist zwar etwas ein Hü-und-Hott, aber es funktioniert.
Nachtrag: Ich stell euch unten gleich noch einen Beitrag ran, wo ich zeig wie du das machst.
Meine persönliche Meinung:
Überprüfe bitte deine Einstellung zu Responsive Webdesign. Willst du Leute mit kleineren Monitoren wirklich ignorieren bzw. ihnen das exakt selbe wie Leuten mit großen Monitoren vorsetzen, obwohl es für sie einfach durch den kleineren Viewport ungeeignet ist? Bedenke, dass du als Webdesigner einen riesigen Vorteil hast: Du arbeitest in einem tatsächlich flexiblen Medium und kannst mittlereile Kreativität darin zeigen, jedem Nutzer das zu präsentieren, was für ihn (im Bezug auf den Viewport) am besten ist.
Natürlich ist das Aufwand. Ich werde z.B. meine eigene Website wohl erst nächstes Jahr umstellen, weil mir derzeit partout die Zeit fehlt um es richtig zu machen. Ich sehe auch von mir selbst, dass das Denken in "Responsive Webdesign" oder in Ansätzen wie "Mobile First" das Erarbeiten neuer idealer Handlungsansätze bedeutet. In gewisser Hinsicht macht mich das aber auch euphorisch, weil ich von Jahr zu Jahr mehr dazu lerne und mir immer mehr Möglichkeiten zur Verfügung stehen, weil sich die Browser-Generationen natürlich auch modernisieren. Jahrelang haben wir Webdesigner davon gesprochen, dass Grafikdesigner keinen Plan haben, wie schwer das Arbeiten in einem flexiblen Medium ist ... dabei haben wir das selbst gar nicht eingehalten, weil die meisten von uns - mich eingeschlossen - doch mit fixen Größen (z.B. 960px) gearbeitet haben.
Jetzt ist die Zeit reif für wirklich flexibles Webdesign, denn eines ist klar:
Der Markt hat uns eingeholt. Pro Jahr werden weltweit mehr Mobilgeräte wie Smartphones und Tablets verkauft, als normale PCs/Notebooks. Die Zeichen sind also klar - jeder Webdesigner muss sich fragen wie er damit umgehen wird. Die alten Arbeitsweisen in die neue mobile Realität zwingen, oder sich bewegen und nutzerfreundlich arbeiten, auch wenn es in der Lernphase erstmal anstrengender ist.
PS: Falls ihr noch etwas Verständnisschwierigkeiten habt, wie man #right und #left in den kleineren Auflösungen (Media Query) behandelt, habe ich das in diesem Thread erklärt.
PPS: Ich bin ein großer Fan von Responsive Webdesign / Mobile First. Es gibt aber auch Projekte, wo ich die responsive Vorgaben von Contao nicht ideal finde und z.B. für das Grid-System lieber ein eigenes erarbeite und einbinde. Das ist total ok! Contao bietet euch eine Hilfe, aber kein Muss. Ich empfehle euch aber, dass ihr euch die Zeit nehmt um die Vorgaben von Contao wirklich zu verstehen ... erst wenn ihr die Vor- und Nachteile davon kennt, könnt ihr (meiner Meinung nach) eine wirklich rationale Entscheidung treffen, ob sie für das aktuelle Projekt geeignet ist oder nicht.
Falls du - trotz meiner feurigen Rede oben :D ;) - die responsive Anweisung überschreiben willst, machst du das so:
Lade dir aus dem Anhang die "core-responsive-ueberschreiben.css" herunter und lade sie in dein Backend. Binde sie dann in dein Seitenlayout ein. Damit sollte das verkleinern zwischen den Größen von 768px-979px überschrieben sein (darunter wird immer noch linearisiert - das ist imho dann aber wirklich ok).
PS: Wenn du das Grid-CSS vom Contao-Core einsetzen willst, dann müsstest du davon die Anweisungen für kleinere Breiten auch überschreiben! Das erkläre ich jetzt aber nicht mehr, da ich das dann irgendwann absurd finde ... ich plädiere ja immer noch FÜR responsive Design ;) ...
Hallo Nina,
erstmal ist das vollkommen verständlich was du da sagst und du hast damit auch Recht.
Aber dennoch finde ich es ziemlich unpassend dem User ab sofort quasi vorzuschreiben Responsive zu arbeiten und man das per CSS-Reset verhindern muss ... WENN DER KUNDE DAS NICHT MÖCHTE UND AUCH DAHER NICHT DAFÜR BEZAHLT.
Ich freue mich auch bereits meine ersten responsive designs umzusetzen und demnächst steht wahrscheinlich / hoffentlich auch ein großes Projekt ins haus. Ich verstehe aber beim besten Willen nicht wieso man diesen Schritt (offenbar bewusst) gemacht hat.
Es gibt zu dem Thema jetzt nicht nur einen Thread, an dem der User nicht versteht was gerade passiert und weshalb das nun ist wie es ist, ich finde diese Option sollte frei wählbar sein und nicht vordefiniert werden. Aber wie gesagt, Recht hast du, dem Kunden ist das aber manchmal, selbst nach zureden völlig egal :)
Es ist so, daß ich mit dem neuen Contao Framework noch meine Schwierigkeiten hab, was nicht bedeutet ich lehnte es ab. Es braucht halt eine Zeit der Einarbeitung. Bei einer neuen Seite spiele ich mich gestern erst mit dem Layout-Builder kombiniert mit dem 960-Pixel-Grid, dann nur Grid, usw. Als ich endlich ein schönes Layout hatte mußte ich feststellen, wie schrecklich es aussah, wenn es zusammengeschoben wird.
Es gibt beim Responsive Webdesign einfach mehr zu beachten und das muß gelernt sein. Und nicht jeder tut sich leicht mit dem Einarbeiten.
Besten Dank für die Anleitung Nina. Ich hab mich die halbe Nacht mit der Seite beschäftigt. Mir auch überlegt, ob ich die CSS mit einem eigenen Layout überschreiben soll, aber mich dagegen entschieden. Die Gründe dafür vielfältig, einer ist, man will sich irgendwie nicht auf dem Stand von gestern ausruhen. (Wobei dieser bei manchen Projekten durchaus seine Daseinsberechtigung hat.)
Vermutlich muß man beim neuen Framework ganz anders mit den Breitenangaben umgehen. So ganz habe ich den dreh noch nicht heraus, zumindest was die Feinheiten angeht. Aktuell Frage ich mich wie man verhindern kann, daß ein Text im Header der mit z-index über einem Bild liegt, beim zusammen Schieben sich nicht einfach nach unten über alles andere legt. Das Bild hinter dem Text wird hingegen automatisch skaliert. …
Gib dafür bitte am besten nochmal einen Link zu genau der Seite wo das auftaucht. Dann können wir konkret helfen.Zitat:
Zitat von Birden
Für den Header hab ich ein Modul mit eigenem HTML-Code, mit dem inhalt:
Das CSS dazu sieht so aus:HTML-Code:<p class="seitenname">Seiten Name</p>
<p class="hintergrund"><img src="files/5876/1000/hintergrund.png" width="960" height="100" alt="Seiten Name"</p>
#header {
Ein Verlauf von unten nach oben
}
#header .hintergrund {
position:relative;
background-repeat:no-repeat;
z-index: 1;
}
#header .seitenname {
position:absolute;
padding-top:45px;
padding-bottom:10px;
padding-left:10px;
color:#a2df77;
text-indent:10px;
font:3.1em;
text-shadow: 1px 1px #000;
z-index: 2;
}
(Das Hintergrundbild hat transparente Flächen, daher der Verlauf im Hintergrund. Ist 100px in der höhe, während #header 120px hat.)
Das Problem ist, daß bei diesem Aufbau der Seitennamen im Header beim zusammenschieben der Seite, sich nach unten über Main schiebt, und das ist nicht wie es sein sollte. Allerdings fand ich noch kein Weg der dies verhindert.
Haste mal 'nen Link?
Hi Birden,
wie soll es sich denn verhalten, wenn der Platz nicht ausreicht?
Spontan fällt mir ein, in deinem Modul ein umschließendes DIV mit overflow:hidden; zu verwenden - falls es das ist, was du willst.
Gruß, folkfreund
Versuche meine Seite auf Contao 3 aufzubauen
Dern Header verkleinert sich auf 20 Pixel Höhe, wenn ich das Browserfenster schmaler ziehe?
Im Seitenlayout ist aber eine Höhe von 315 px definiert.
Kann mir jemand sagen an was liegt?
Wenn ich eine min-height vergebe passiert das dann nicht mehr. Verstehe aber nicht ganz warum das bei height passiert?!
Hallo Nina,
hast du vielleicht auch eine css für den Layout Builder bereit um das responsive Verhalten zu überschreiben.
Beschäftigte mich jetzt seit 4 Wochen mit Contao 3.0 und habe schon einige Design Fehler ausgebessert die nach dem Update aufgefallen sind.
Habe auch deine Meinung zum responsiven Verhalten in beiden Threads gelesen und respektiere dieses finde es aber Falsch das einfach jedem jetzt vorzuschreiben responsive zu arbeiten mit Contao eine Option hätte doch gereicht zum aktivieren/deaktivieren und dann wäre es doch jedem selbst überlassen.
Gruß
Zwergenmeister
Es braucht wohl jeder seine Zeit um zu Verstehen, und um sich anzueignen auf was zu Achten ist.
Es gibt kaum einen Grund das responsive Verhalten zu deaktivieren. Es ist jedoch angebracht nach Wegen zu suchen wie die Seitengestaltung sich in der jeweiligen Größe am besten darstellt. Mit Media-Queries kann man gezielt auf das Verhalten einwirken.
Ja, Nina hat das was
https://community.contao.org/de/show...l=1#post233184
Birden,
da ich auf der Startseite auch direkt Videos mit anbiete die nicht in einem normalen Content stehen und die Seite auch vor Contao 3.0 mit 2.11 sehr gut zu bedienen war möchte ich das gerne auch so lassen.
Videos werden als JWplayer mit js eingebunden. Wenn jemand auf den responsiven Hype aufspringen möchte kann er das ja gerne tun.
Bin schon ein Stück weiter hab aus der Layout.css das @media entfernt und das läuft aber leider auch nur denn das alte gridpx.css deaktiviert wird. Dann stimmt aber das Design an einigen stellen nicht mehr, muss da wieder auf Fehlersuche gehen. So langsam ist meine Lust an Contao vergangen ......
Ist überhaupt beides möglich wie zu 2.11 normales statisches Layout + basic.css (Nutze in 3.0 die reset leicht angepasst das hat wenigstens recht schnell funktioniert) + gridpx.css ???
VG
Zwergenmeister
Bug Buster,
das betrifft doch das Grid
Code:@media(min-width:768px) and (max-width:979px) {
#wrapper {
width: 960px;
margin: 0 auto
}
*[class*="grid"] {
float: left;
display: inline;
margin-right: 10px;
margin-left: 10px
}
.mod_article>* {
margin-left: 10px;
margin-right: 10px
}
.inside>*[class*="grid"] {
margin-left: 0;
margin-right: 0
}
.grid1 {
width: 60px
}
.grid2 {
width: 140px
}
.grid3 {
width: 220px
}
.grid4 {
width: 300px
}
.grid5 {
width: 380px
}
.grid6 {
width: 460px
}
.grid7 {
width: 540px
}
.grid8 {
width: 620px
}
.grid9 {
width: 700px
}
.grid10 {
width: 780px
}
.grid11 {
width: 860px
}
.grid12 {
width: 940px
}
.mod_article.grid1 {
width: 80px
}
.mod_article.grid2 {
width: 160px
}
.mod_article.grid3 {
width: 240px
}
.mod_article.grid4 {
width: 320px
}
.mod_article.grid5 {
width: 400px
}
.mod_article.grid6 {
width: 480px
}
.mod_article.grid7 {
width: 560px
}
.mod_article.grid8 {
width: 640px
}
.mod_article.grid9 {
width: 720px
}
.mod_article.grid10 {
width: 800px
}
.mod_article.grid11 {
width: 880px
}
.mod_article.grid12 {
width: 960px
}
.offset1 {
margin-left: 90px
}
.offset2 {
margin-left: 170px
}
.offset3 {
margin-left: 250px
}
.offset4 {
margin-left: 330px
}
.offset5 {
margin-left: 410px
}
.offset6 {
margin-left: 490px
}
.offset7 {
margin-left: 570px
}
.offset8 {
margin-left: 650px
}
.offset9 {
margin-left: 730px
}
.offset10 {
margin-left: 810px
}
.offset11 {
margin-left: 890px
}
.offset12 {
margin-left: 970px
}
}
gridpx ist doch aus 2.11? Die wird nicht ganz passen für 3.0.
Contao 3 bringt ja quasi die "Grid Pixel basiert" schon mit, nennt sich halt "Responsive Grid".
Wenn du aus dem "Responsive Grid" das "Responsive" wegnehmen willst, dann nehme die Datei
"assets / contao / css / responsive-uncompressed.css"
und lege ne Kopie an, schmeiß die media queries raus und importiere dann die Datei ins Backend, dann kannste die im Layout einbinden wie die anderen auch.
Wo ist das Problem?
Ja, ok, aber daran sieht man auch auf welche Art man media angaben überschreiben kann, einfach wieder so setzen wie die Angaben wären wenn media querie nicht da wäre.Zitat:
Zitat von Zwergenmeister
Bug Buster,
die Schritte habe ich jetzt durch geführt im Layout.css und der Responsiven.css die @media komplett entfernt +(Uncompressed).
Mit dem Effekt das die Darstellung Mobile jetzt weider geht, aber mit dem Problem das #main #right #left verschoben sind.
Hab es jetzt nur auf der deutschen Startseite und unter dem Produkt SeitenLayout aktiviert mit einem jetzt schrecklichen Design und einigen Fehlern Desktop und Mobile.
Hab noch ein wenig getestet einige Klassen editiert in Artikeln von g8 aud grid8 etc. aber an vielen stellen verhält sich das ganze sehr komisch.
Feierabend für heute, schönes Wochende
Das nennt sich "Holy grail" und ist durchaus gewollt.Zitat:
Zitat von Zwergenmeister
Die ursprünglichen Positionen kannst du CSS natürlich wieder herstellen.
Gruß, folkfreund
Hallo Bug Buster,
bin aus dem Wochenende gut erholt frisch ans Werk.
Jetziger Status:
Layout Builder / + Responsive Grid aktiviert (ohne media queries die sind entfernt.)
Contao 3.0.1 ist aktuell installiert / wollte noch auf 3.0.3 updaten muss nur meine LiveID verlängern (ausgelaufen....:o)
Habe jetzt halt in der Kombination Probleme mit verschobenen Inhalt im zwei Spaltigen Layout.
Ähnlich den Problemen hier:
https://github.com/contao/core/issues/5170
das #main inside. margin-left:20px stört und die #right ist noch verschoben wo ich noch nicht genau weis warum das passiert?
Frage dazu noch welchen Elementen muss ich genau die Grid Klassen geben, allen Modulen in der Spalte oder allen Artikeln in der Spalte ? Nicht das ich da einen Fehler habe.
Ein einspaltiges Layout mit Layout Builder und Responsive Grid läuft.
VG
Zwergenmeister
Bei Layout Builder und definierten Spalten + Responsive Grid, nur ab Contao 3.0.3
Die Spalten dann wie ich dort im Ticket beschrieben habe.
"nicht auf die gewünschte grid class Breite sondern auf die grid class Breite noch 2 mal Abstand dazu nehmen. (hier also 220px + 2 x10px).."
Bei den Vorgängerversionen von Contao hat der Layoutbuilder versucht, die Abstände selber zu berechnen und zu korrigieren, das ging wohl ab und zu schief.
Ich bin leider auf meiner Grid Akademie Seite selber noch nicht dazu gekommen das nun auszuprobieren.
Hallo BugBuster,
kurzes Feedback läuft jetzt alles mit Contao 3.0.3 der margin bug ist raus.
Habe die @media aus den Quelldateien entfernt, vielleicht gibt es ja bald da ein Umdenken und eine deaktivieren Option.
Ist zwar nicht Update sicher aber dann ändere ich das halt bei jedem Update.
Vielen Dank noch mal.
da ich mein Projekt in nicht allzulanger Zeit schon abliefern muss, und wir von Anfang an das Design so aufgebaut haben, dass mir das mit dem responiven Verhalten und dem Holy Grail garnicht reingepasst hat, habe ich nun auch die @media aus der layout.css entfernt und somit das statische Layout erstmal gesichert.
Habe auch den Viewport noch aus der Templatedatei rausgenommen, damit auf dem kleineren Bildschirmen nicht nur ein Ausschnitt zu sehen ist.
Soweit so gut. Nur hab ich da noch ein kleines Problem mit der Lightbox.
Da werden bei folgender Seite am Rechner mit grossem Bildschirm und auch am iPad die Bilder unter dem Menüpunkt Galerie zwar ordentlich dargestellt, nur fällt mir am iPhone auf, dass je nachdem, ob man die ganze Seite gerade am Bildschirm sieht, oder ob man gerade etwas reingezoomt hat, die Bilder unterschiedlich groß angezeigt werden. Wenn man dann noch nachträglich reinzoomen will, versschiebt sich das Bild bzw der abgedunkelte Hintergrund ständig, was etwas komisch aussieht.
Früher, als ich die Lightbox noch händisch in statische HTML Seiten eingebaut habe, wurden die Bilder auch bei kleinen Bildschirmen in der Originalgrösse angezeigt, hier zB. Vielleicht lässt sich das bei meinem jetzigen Projekt auch so hinbiegen? Die Lightbox bleibt bei der Lionsseite immer in der Mitte des Browserfensters, wenn man es in der Grösse verändert, bei der Projektseite bleibt sie immer fix an dem Punkt, an dem sie sich geöffnet hat.
Also ich bin ja vom responsive Design überhaupt nicht abgeneigt, nur bei diesem Projekt geht sich das nicht mehr aus. Die nächsten Projekte muss ich da halt von Anfang an schon anders angehen.
Aber eine Frage hätte ich noch. Wenn ihr mal auf meine oben genannnte Beispielseite schaut, da habe ich ja die horizontale Navigation. Wenn ich das Fenster - bevor ich die @media Zeilen aus der layout.css rausgenommen habe - zusammengeschoben habe, wurde der braune Balken immer öfter untereinander gereiht, so oft halt, wie nötig, dass alle Menüpunkte Platz gefunden habe. Das Titelbild wurde verkleinert, die Menüleiste blieb jedoch immer gleich hoch, und wenn diese bei kleinem Bildschirm wie dem iPhone dann ca 5 mal untereinander gereiht ist, wirkt das etwas mächtig gegenüber dem eigentlichen Titelbild. Was wäre also im Fall einer horizontalen Navigation eine geeignete Möglichkeit, diese im verkleinerten Zustand trotzdem ordentlich rüberzubringen?
Sorry, falls die Fragen etwas stümperhaft rüberkommen, bin beim Thema responsive noch sehr neu. Muss mich damit noch viel auseinandersetzen, muss aber leider erstmal das jetzige Projekt zu Ende bringen.
Gruss, Martin
Madob,
kann das Problem mit der Lightbox bestätigen, ist mir jetzt auch aufgefallen.
Hast da schon was gefunden?
nicht wirklich, bin da etwas ratlos muss ich sagen.Zitat:
Zitat von Zwergenmeister
Das mag für neue Projekte alles richtig sein. Wenn man aber ein älteres Projekt auf die neue Contao-Version aktualisieren will/möchte/muss, kommt vor ;) dann scheint mir dieser Aspekt bisher ziemlich vernachlässigt worden zu sein.Zitat:
Zitat von Nina
Imho sollte man bspw. nicht einfach ein Viewport im fe_page Template auf 1.0 setzen.
Man hat im Zweifel auch keine Zeit 'Standard-CSS' Dateien zu überschreiben, Templates zu ändern (Reverse Engineering zu betreiben), etc. Meinem Eindruck nach ist das nicht mehr konsistent durchdacht. Responsive, etc. hin oder her, das kann man alles optional (rückwärtskompatibel) gestalten. Wurde bis 2.9 auch sehr gut gemacht. Imho ist das mit C3 ein ziemlicher Hick-Hack.
PS: Das datenbankgestützte 'Dateisystem' ist für Redakteure hilfreich, aber nicht für Admins - als würden Admins Dateien über den Dateimanager hochladen/verschieben?! - auch das ist nicht optional?!
Ich weiß gar nicht wie oft ich das schon geschrieben habe.
Contao 3 ist ein MAJOR Release. Niemand hatte die Absicht, dass diese vollständig kompatible zu Contao 2 ist und wird.
Vista war das auch nicht zu XP....
Außerdem sind wir immer noch in der "Nuller" Version, da ist es sehr wahrscheinlich, dass noch Bugs vorhanden sind oder Konzepte sich in der Praxis als weniger sinnvoll erweisen.
(Schon mal mit einer Windows Version vor SP3 gut arbeiten können?)
In der 3.1 wird noch einiges ändern.
Niemand muss auf 3.0 updaten, ich sehe jedenfalls keinen Grund. Alles was Contao 3 kann, kann Contao 2 auch, wenn dazu auch manchmal zusätzliche Erweiterungen nötig sind.
Mal vom der DB gestützten Dateiverwaltung abgesehen, aber das ging Jahre ohne und kann auch noch eine Weile weiter ohne gehen, bis diese in Contao 3 noch ein wenige verbessert wurde.
Nachtrag: Im übrigen hatten wir beim Update auf 2.11 auch solche (aber andere) Probleme. Damals rief ich auf für eine Testfactory.
https://community.contao.org/de/show...l=1#post189881
Was ist passiert als die 3.0.rc1 kam? Nichts. Getestet haben wieder hauptsächlich nur die Entwickler und kaum die Massen an Redakteuren die es gebraucht hätte. Schade.
Entspann Dich ;) Sind meine ersten Erfahrungswerte, kann man ja auch draus lernen.
Weiß ja auch das Contao ein Community Projekt ist. Ich glaube aber das an einigen Punkten vielleicht?! falsche Entscheidungen/Prioriäten gesetzt wurden.
Vergleichsargumente (Vista/XP, etc.) sind imho immer unsinnig. ;)
PS: Ich bin selbstständig und habe sehr begrenzte Ressourcen.
Meine Versuche das integrierte holy grail system aus zu schalten schlagen gerade fehl.
Das Layout soll unter einer Browserfenster-Breite von 768px immer noch statisch 1080px breit sein.
In die System CSS möchte ich ungern eingreifen. Ich habe versucht die Werte mit folgendem Code zu überschreiben. Es funktioniert auf manchen Seiten und auf manchen nicht.
@media(max-width:767px){
#wrapper{margin:0 auto;width:1080px}
#header,#footer{height:auto}
#container{padding-left:200px;padding-right:200px}
#main,#left,#right{float:left;width:auto}
#left{right:200px;margin-left:-100%}
#right{margin-right:-100%;}
}
Hat jemand eine Ahnung welchen nächsten Schritt ich machen kann?
Ein Link würde vielleicht helfen...
folkfreund
Ich würde an deiner Stelle einfach den Layout Builder / Holy Grail ausschalten und das Layout gleich selbst umsetzen.Zitat:
Zitat von limbic-loop
Holy Grail bedeutet, dass im HTML-Code #main vor #left und #right kommt, nicht mehr und nicht weniger. Das hat erstmal nichts mit 'responsive' zu tun.Zitat:
Zitat von limbic-loop
Wenn ich dich richtig verstehe, dann möchtest du das automatische Umbrechen von #left und #right in Contao 3.x bei kleinen Fenstergrößen unterbinden.
Ich habe hier gerade kein System. Schau mal nach, wie die Einstellungen für #left, #main und #right bei breiterem Fenster sind (z.B. mit Firebug) und stell diese Werte in deinem CSS auch für die schmalen Fenster wieder ein. Diese Einstellungen sorgen dafür, dass trotz der Reihenfolge im HTML die Blöcke in der Reihenfolge #left #main #right auf dem Bildschirm erscheinen. Und das soll ja wahrscheinlich so bleiben.
Das System-CSS von Contao 3.x ändert hier bei schmalen Fenstern die Einstellungen und #left und #right werden dann unterhalb von #main ausgegeben.
Außerdem musst du natürlich den #wrapper auf die gewünschte Größe einstellen
folkfreundCode:@media(max-width:767px){
#wrapper{margin:0 auto;width:1080px; min-width:1080px;}
}