"Holy Grail"/Responsives Verhalten für Contao 3.X abschalten

**µaTh** · 20.08.2014, 20:57

Hallo zusammen,

ich habe heute eine Contao 2.11 Webseite auf Contao 3.2 LTS geupdatet. Leider war/ist die Webseite überhaupt nicht responsive aufgebaut. Eine Überarbeitung macht nicht wirklich Sinn.

Bei kleinen Displays (<767px) springt bekanntlich das Layout um (siehe Media-Query in assets/contao/css/layout.css). Nervig in dem Fall.

Natürlich habe ich fleißig im Forum/bei Google nach einer Lösung gesucht. Neben der Möglichkeit die Media-Query-Zeilen aus der CSS-Datei zu löschen (und bei jedem Update erneut zu löschen) habe ich folgende "Lösung" für mich (?) entdeckt.

Dazu brauch ich eure Meinung/Erfahrung.

Ich habe in den Seitenlayouts einfach den Viewport "überschrieben":

Code:

<meta name="viewport" content="width=1000,initial-scale=1.0" />

Dadurch steht der viewport zwei mal im <head>, mein manueller viewport jedoch weiter unten und müsste den orginal-Contao-Viewport überschreiben. Ist das i.O. so, oder sollte ich im Template fe_page.xhtml die Viewportzeile manuell entfernen (aktuell habe ich das Template nicht angepasst => einfacheres Update)?

Bis jetzt sieht es so aus, dass dadurch das Media-Query nicht mehr anspringt und somit das Layout (statische Breite: 900px) erhalten bleibt.

Ich habe eben mit Firefox 31, Internet Explorer 11, Opera 12.17, Chrome 27 getestet.

Was meint ihr? Ist das eine akzeptable Lösung?

Grüße
µaTh

**comanche** · 24.10.2014, 08:44

Bei meiner Installation (Contao 3.3.5) funktioniert das nicht. Hat jemand eine Ahnung warum nicht?

Ich suche nämlich ebenso dringend nach einer Lösung das Responsive-Verhalten bequem deaktivieren zu können.

@µaTh: du brauchst die Viewport-Anweisung im Seitenlayout nicht zusätzlich in den Head schreiben, sondern kannst für eigene Viewport-Parameter einfach das Textfeld "Viewport" in den "Experten-Einstellungen" im Seitenlayout verwenden.

Grüße,
Andreas

**Franko** · 24.10.2014, 09:29

Ich glaube seit der 3.3.3 kannst Du das responsive Verhalten im Theme bequem deaktivieren:

- Im Bereich CSS-Framework lediglich "Layout-Builder" und NICHT "Responsives Layout" auswählen
Das verhindert den "holy grail" ...

- Wenn man zusätzlich das "12-Spalten Grid" aktiviert bitte beachten:
Hier kommen wieder media-queries zum Einsatz die das Grid entsprechend anpassen.
Wenn man das nicht will einfach eine Kopie dieser Datei anlegen, die media-queries hier entfernen und wieder unter "Zusätzliche Stylesheets" einbinden.

Frank

**comanche** · 24.10.2014, 10:50

Danke für die Antwort, Frank!

Da ich u.a. auch das Grid-System nutze, bleibt wohl doch nur das manuelle Eingreifen ins CSS als Lösung übrig. :/

Ich wünsch' ein schönes Wochenende!

Grüße,
Andreas

**tab** · 24.10.2014, 10:53

Zitat von Franko

Ich glaube seit der 3.3.3 kannst Du das responsive Verhalten im Theme bequem deaktivieren:

- Im Bereich CSS-Framework lediglich "Layout-Builder" und NICHT "Responsives Layout" auswählen
Das verhindert den "holy grail" ...

Den "holy grail" verhindert es nicht. Der bedeutet ja nur, dass main vor left im Quelltext ausgegeben wird und hat mit responsiv m.E. nichts zu tun. Das responsive Verhalten bei Fensterbreiten unter 768 Pixel verhindert die von dir beschriebene Einstellung allerdings schon. Gerade eben nachgeschaut.

**Franko** · 24.10.2014, 12:27

Zitat von tab

Den "holy grail" verhindert es nicht. Der bedeutet ja nur, dass main vor left im Quelltext ausgegeben wird und hat mit responsiv m.E. nichts zu tun. Das responsive Verhalten bei Fensterbreiten unter 768 Pixel verhindert die von dir beschriebene Einstellung allerdings schon. Gerade eben nachgeschaut.

Ok, so ist es wohl richtig formuliert ...

**Spooky** · 24.10.2014, 12:30

Zitat von comanche

Danke für die Antwort, Frank!

Da ich u.a. auch das Grid-System nutze, bleibt wohl doch nur das manuelle Eingreifen ins CSS als Lösung übrig. :/

Ich wünsch' ein schönes Wochenende!

Grüße,
Andreas

Also eigentlich sollte eine Fixierung des Viewports auf die min-width des #wrappers reichen, egal ob mit oder ohne responsive Layout.