Holy Grail "abschalten" - aber wie?

[chefprolet]

Servus allerseits,

ich bin gerade am testen von Contao 3. Habe jetzt schon einiges gelesen und gesucht iim Forum, aber komme nicht weiter.
So wie ich das jetzt verstanden habe, wird über die Auswahl des CSS-Framworks im Seitenlayout die Seite gesteuert.
Ich habe den Layout Builder aktiviert. Wenn jetzt der Viewport kleiner ist wie die Seite ansich, dann wird alles untereinander geschoben.
Genau das möchte ich gerne verhindern. Ich möchte gerne, dass einfach ein horizontaler Scrollbalken eingeblendet wird.

Leider finde ich keine Seite, auf der die verschiedenen Framework genauer erklärt werden.

Weiss jemand Rat und Hilfe?

Vielen Dank
Sven

[jona]

Wenn ich das richtig sehe wird die fuer das untereinanderschieben verwantwortliche Media Query zwangslaeufig mit dem restlichen Layout Builder geladen. Die einfachste (leider nicht gerade schoene) Loesung die mir gerade einfaellt waere die Media Query in der entsprechenden CSS Datei zu loeschen.

In der datei assets/contao/css/layouts.css muesste also das Folgende entfernt werden:

@media(max-width:767px){#wrapper{margin:0;width:auto}#header,#footer{height:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}

(Cache leeren nich vergessen)

[ciaobello]

Holy Grail "abschalten" - aber wie?

So wie ich aus Diversen Themen hier im Forum entnehmen konnte ist es der "Layout-Builder" der auf "Holy Grail" aufbaut und somit wohl der Richtige Schalten ist um Holy Grail zu deaktivieren ?!

Ich habe gestern auch mal rum probiert um auf die vielen, hier im Forum gestellten Fragen eine Antwort zu kriegen. Habe was Holy Grail anbelangt mal den Artikel aus alistapart studiert. Der Artikel ist aber relativ (sehr) alt und auch in diesem werden Verschiedene Versionen angesprochen.

Gibt es was neueres auf Deutsch?

Leider finde ich keine Seite, auf der die verschiedenen Framework genauer erklärt werden.

Du meinst schon auch speziell auf Contao3 bezogen oder? <whispering>Online Handbuch etc...</whispering>

Mir ist leider auch nur das was in der Hilfe im Backend Angezeigt wird bekannt:

CSS-Reset	Entfernt die inkonsistente Standardformatierung der HTML-Elemente in verschiedenen Browsern.
Layout-Builder	Erstellt das CSS-Layout auf Basis der Seitenlayout-Einstellungen. Diese Komponente muss aktiv sein, damit der Seitengenerator korrekt arbeitet!
Responsive Grid	Erzeugt ein responsives 12-Spalten Grid, das mittels der CSS-Klassen "grid1" bis "grid12" sowie "offset1" bis "offset12" gesteuert wird.
TinyMCE-Stylesheet	Bindet das tinymce.css-Stylesheet aus dem Upload-Verzeichnis ein.

Zudem gibt es eine Thema welches ein ähnliches/das selbe Problem Beschreibt.

Kommt Zeit ... kommt Rat ... in der Tat

[rezico]

Hiho,
also das entfernen von

@media(max-width:767px){#wrapper{margin:0;width:auto}#header,#footer{height:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}

war letztlich die Lösung.
Allerdings finde ich auch, dass man hier dringend die Option benötigt, da es nun mal nicht immer notwendig ist eine mobile Seite zu gestalten und daher das Layout nicht immer so aufgebaut ist.

Bitte ändern!

danke!

[pmmueller]

Habe was Holy Grail anbelangt mal den Artikel aus alistapart studiert. Der Artikel ist aber relativ (sehr) alt und auch in diesem werden Verschiedene Versionen angesprochen.

Gibt es was neueres auf Deutsch?

Der erste Teil ist relevant, bis inklusive "Step 5". "Equal Height Columns" gibt's in Contao nicht (und das ist auch gut so).

[pmmueller]

also das entfernen von

Du solltest das nicht in /assets/... aus der layout.css entfernen, sondern in einem eigenen Stylesheet überschreiben bzw. resetten. Die layout.css wird spätestens beim nächsten Contao-Update neu eingespielt. Man ändert keine Core-Dateien

Bitte ändern!

Dann solltest du ein entsprechendes Ticket schreiben. Hier im Forum wird das niemand finden

[Nina]

Bitte lest euch auch meine Gedanken zum Thema Responsive Webdesign durch.