responsive grid mit navispalte

Hi Leute,

ich kämpfe gerade mit einer webseite die ich von 2.x auf 3.x upgedatet habe. Ursprünglich war es ein 2-spaltiges Layout mit einer linken Navispalte und einer rechten Inhaltsspalte.
Jetzt würde gerne das responvie grid verwenden und weiß nicht was besser ist: die linke Spalte belassen oder nur 1-spaltiges Layout und über das Grid die Navi links einfügen. Wo liegen hier die Vor- und Nachteile?
Geht das eingentlich so einfach im grid, links neben dem Inhalt eine Navi als Modul einfügen?

Grüße aus Ludwigsburg
Jochen Kubik

Wenn du nur per Grid arbeiten willst, lege 2 Artikel an pro Seite, die beiden Artikel bekommen grid Klassen und liegen somit automatisch nebeneinander.
Im ersten Artikel dann das Navi Modul reinpacken.
Wie hier zum Beispiel, als Demo für mein 16er Grid.
http://contaogrid.glen-langer.de/pix...l-spalten.html

Hi Bugbuster,
ich finde die Lösung mit den 2 Artikeln ein wenig unübersichtlich, deshalb würde ich schon gerne die 2-spaltige Lösung bevorzugen. Allerdings habe ich Probleme mit dem CSS. Die linke Spalte "rutscht" links aus dem "container" raus. Das mag ein CSS Relikt aus dem alten Layout sein, ich finde aber den Fehler nicht :-(

Grüße aus Ludwigsburg
Jochen Kubik

Das wird dann an dem Holy Grail internem Layout liegen. Bei dem darfste keine paddings/margins auf #left, #main, #right haben, dass nimmt der dir übel.
Denn damit wird die ganze Verschiebung durch Berechnung erwirkt.

Gilt das auch für die .inside der genannten Bereiche?
Würdest Du evtl. einen Blick hinter die Kulissen werfen?

Grüße aus Ludwigsburg
Jochen Kubik

Nein, die .inside kannste anfassen, dazu sind die da :-)
Muss man sich per Firefox + Firebug man ansehen oder äquivalentes in anderen Browsern.

Ich bin mit ff + firebug dabei, finde es aber nicht!

StarTrek-Buch? ;-)

Grüße aus Ludwigsburg
Jochen Kubik

Hallo Jochen,

scha dir mal die Vortragsfolien von Peter Müller an, da erkennt man ganz gut was das Holy macht.
http://pmueller.de/blog/vortrag-cont...dtag-2013.html

Die linke Spalte sollte im Layout-Builder genau 240px breit sein. Das entspricht 3 Spalten. Dann bleiben 9 Spalten für den Inhalt.

Auf http://crg.pmueller.de/ kannst du dir (vorübergehend) ein Beispiel mit einer rechten Spalte anschauen. Benutzername responsive. Passwort contao30.

Und du wirst ein bisschen nachgestalten müssen, denn das Grid hat drei Stufen:
1. Bei einem Viewport > 980px sind die Spalten 80px breit
2. Bei einem Viewport < 980px sind die Spalten 62px breit
3. Bei einem Viewport < 768px ist es einspaltig

Man sieht das wunderbar mit dem Grid-Overlay aus den Contao Tools für Chrome, wenn man das Browserfenster vergrößert bzw. verkleinert verändern sich die pinkfarbenen Overlay-Spalten mit.

Wenn man in Contao im Inhaltsbereich die Grid-Klassen zuweist, regelt Contao die veränderten Spaltenbreiten von selbst. Wenn du aber wie in der linken Spalte im Layout-Builder 240px zuweist, dann müsstest du in einem Stylesheet mit einer entsprechenden Media Query für 769px bis 979px die Spaltenbreite noch auf 186px reduzieren (3 x 62px statt 3 x 80px).

Zitat:

---

Zitat von pmmueller

Wenn du aber wie in der linken Spalte im Layout-Builder 240px zuweist, dann müsstest du in einem Stylesheet mit einer entsprechenden Media Query für 769px bis 979px die Spaltenbreite noch auf 186px reduzieren (3 x 62px statt 3 x 80px).

---

Dieses Satz sollten sich alle Fett markiert an die Wand nageln. Denn das vergessen 90% der Nutzer die der Meinung sind, man müsse unbedingt Layout Builder und Grid kombinieren um weniger Aufwand mit Spalten und Modulen zu haben.

Ich habe das auch mal probiert und bin genau darüber gestolpert und fand die Nacharbeit genauso aufwändig. Daher bin ich danach wieder zurück zu entweder Layout Builder oder Grid, aber nicht kombiniert.

Hallo Peter,
vielen Dank für die ausfürliche Antwort und den Einblick hinter die Kulissen!

Im Prinzip habe ich die Sachen schon fast verstanden (wer versteht etwas schon ganz ;-).
Auch daß man den Spalten eine bestimmte Breite zuweisen muß damit sie ins Grid passen ist mir klar (btw: Gehen auch drei grids d.h. 360px ?)

Leider schiebt sich bei meinem aktuellen Projekt die linke Spalte links neben den container. D.h. Irgendetwas stimmt im CSS nicht, da es zum größten Teil ja noch aus der non-responsive Ära kommt!

Grüße aus Ludwigsburg
Jochen Kubik

Link?

Ansonsten hilft eigentlich nur CSS aufräumen. Ich verstehe "links neben den Container" nicht ganz. Die Spalte kann ja eigentlich nicht aus dem Container ausbrechen, da sie ja darin festgenagelt ist.

Idee: Hast du ein Full-Header-Layout? Also hat der Wrapper keine Begrenzung in der Breite? Der hält nämlich den Holy Grail zusammen.

Zitat:

---

Zitat von BugBuster

Dieses Satz sollten sich alle Fett markiert an die Wand nageln. Denn das vergessen 90% der Nutzer die der Meinung sind, man müsse unbedingt Layout Builder und Grid kombinieren um weniger Aufwand mit Spalten und Modulen zu haben.

Ich habe das auch mal probiert und bin genau darüber gestolpert und fand die Nacharbeit genauso aufwändig. Daher bin ich danach wieder zurück zu entweder Layout Builder oder Grid, aber nicht kombiniert.

---

Da hast Du natürlich 100%ig recht, was ich aber auf den ersten Blick nicht verstehe, wo da der Aufwand für die Nacharbeit ist? Wenn in der Spalte z.B. eine Navi drin ist, muß man doch vielleicht einfach die Schrift ein wenig verkleinern, oder liege ich da völlig flsch?

Grüße aus Ludwigsburg
Jochen Kubik

Zitat:

---

Zitat von pmmueller

Link?

Ansonsten hilft eigentlich nur CSS aufräumen. Ich verstehe "links neben den Container" nicht ganz. Die Spalte kann ja eigentlich nicht aus dem Container ausbrechen, da sie ja darin festgenagelt ist.

Idee: Hast du ein Full-Header-Layout? Also hat der Wrapper keine Begrenzung in der Breite? Der hält nämlich den Holy Grail zusammen.

---

Ja, daran kann's liegen, aber was mache ich dann?

p.S.: Du hast ne PM

Hi Peter,

das Full-Header-Layout hat ja aber ohne grid auch funktioniert, dann müßte es mit grid ja auch tun, oder?
Brauchst Du einen BE zugang?


Grüße aus Ludwigsburg
Jochen Kubik

Dein Container bietet kein padding-left für die linke Spalte:

• Im Stylesheet screen steht der Style #container { padding: 30px 0; }
• Der überschreibt das wichtige #container { padding-left: 360px; }, das im Style-Block vom Layout-Builder kommt.

Aber wenn du der linken Spalte 360px gibst, dann passt das sowieso alles nicht mehr. Der Wert für die linke Spalte muss schon was mit dem Grid zu tun haben. Da darfst du dir nicht einfach was ausdenken. Platz für grid9 hast du nur, wenn die linke Spalte 240px sind (entspricht grid3).

Wenn das Grid sich verkleinert, wird grid9 aber 538px und die linke Spalte müsste 186px werden (Angaben ohne Gewähr und nicht nachgerechnet). Das sind reine Rechenaufgaben, aber das ist genau die "Nachbearbeitung" die Bugbuster meint. Der Teufel steckt halt im Detail ;-)

EDIT:
Das Grid sollte von Anfang an geplant werden. Das hinterher draufzupfropfen ist viel Arbeit.

Wenn du einfach nur "ein bisschen responsive" haben willst, dann lass das Grid weg, nimm den Layout-Builder und gib #wrapper eine Breite von ungefähr 90% und eine max-width. Dann ist die Site zwischen max-width und 768px flexibel und darunter macht der Layout-Builder alles einspaltig.

Und noch ein letzter Schock: Beim Holy Grail ist es keine gute Idee, die Haupt-Navi in der linken Spalte zu haben. Sie rutscht bei einem Viewport < 768px unter den Inhalt...

Zitat:

---

Zitat von kubjo

das Full-Header-Layout hat ja aber ohne grid auch funktioniert, dann müßte es mit grid ja auch tun, oder?
Brauchst Du einen BE zugang?

---

Das hat nichts mit dem Grid zu tun, dass ist der Holy Grail aus dem Layout-Builder.

Aber dein Problem war ein anderes. Siehe anderen Beitrag.

Hi Peter,
so jetzt bin ich wieder da:

- dasPadding des containers habe ich entfernt, die linke Spalte rutscht dadurch nach rechts aber leider nicht so weite wie gewünscht.
- die 360px sollten eigentlich grid4 entsprechen ich hatte da einen Rechenfehler grid4(navi) + grid8 (inhalt) = grid12 (gesamt), also nicht einfachso ausgedacht, nur verrechnet ;-)
- selbst wenn ich links jetzt mit 240px angebe gibt es ein Problem, der Text des Artikel rutscht nicht unter das Bild das als Modul eingebunden ist.

Vielleicht starte ich wirklich eifach mit dem CSS von vorne.

Die Anpassungen für die kleineren Bildschirme will ich erst in Angriff nehmen wenn es mit der großen Darstellung paßt, daß die Navigation nach unten rutscht ist mir klar! Der Plan ist, eine andere Navi dann über dem Inhalt einzublenden.

Grüße aus Ludwigsburg
Jochen Kubik

Wenn im Grid der Text nicht umbricht
Der Text bricht nicht um, weil du dem Slider grid8 gegeben hast. Dadurch ist der gefloatet.
Dann musst du entweder den Artikel direkt clearen oder ein Clearing-Element wie <br class="clear"> einbauen.

Die Spalte sitzt nicht richtig
Was die Verschiebung der linken Spalte angeht, die nicht ganz an der richtigen Stelle sitzt:
https://github.com/contao/core/issues/4829

"Leo: There is a (surprisingly) simple solution: just subtract the padding from the container width." Du musst das max-width für #container also auf 960px - 240px = 720px setzen, und dann stimmts.

Spaltenbreiten
.grid3 = 220px plus 2x10px margin = 240px Spaltenbreite
.grid4 = 300px plus 2x10px margin = 320px Spaltenbreite
.grid5 = 380px plus 2x10px margin = 400px Spaltenbreite

360px tauchen in dieser Rechnung nicht auf ;-)

Hi Peter,
kurz vor Feierabend lichtet sich der Nebel !!!!

Vielen Dank! Jetzt scheint alles soweit zu klappen!

Die Navi ist jetzt noch grid3, ich werde mal grid4 versuchen.
Der der Slider hat jetzt kein grid8 acht mehr und der Text bricht um! Außerdem paßt die Breite wie gewollt!

DANKE!!!!

Grüße
JK

Hi Peter,

jetzt sitze ich vor der "(min-width:768px) and (max-width:979px)"

und habe folgendes berechnet:
#links 4x 62px = 248px

d.h.

#left { width:248px; }
#container { padding-left: 248px;}

das klappt, aber wie ich den container berechne, der den kleinen Bug hat erschließt sich mir leider nicht!

Zitat:

---

Zitat von pmmueller

Die Spalte sitzt nicht richtig
Was die Verschiebung der linken Spalte angeht, die nicht ganz an der richtigen Stelle sitzt:
https://github.com/contao/core/issues/4829

"Leo: There is a (surprisingly) simple solution: just subtract the padding from the container width." Du musst das max-width für #container also auf 960px - 240px = 720px setzen, und dann stimmts.

---

Zitat:

---

Zitat von kubjo

jetzt sitze ich vor der "(min-width:768px) and (max-width:979px)"
und habe folgendes berechnet:
#links 4x 62px = 248px

---

Plus 2 x 10px margin. (EDIT ist falsch...)

EDIT
My mistake. 248px war richtig! Da sind ja die margins schon drin enthalten!

Großes Grid: 60 + 2x10
Kleines Grid: 42 + 2x10

Guten Abend Peter,

klappt leider nicht, irgendwie ist der Abstand zwischen der Navi und dem Inhalt immer zu groß!


Grüße aus Ludwigsburg
Jochen Kubik

Probiere doch bitte mal Folgendes:

Beim kleinen Grid (768px bis 979px)
Die Ausgangsbreite von #container ist beim kleinen Grid nicht 960px sondern 744px. Laut Formel gibt es also 744px - 248px = 496px. Und dann sollte es passen.
#left { width: 248px; right:248px;}
#container { padding-left:248px; width:496px;}


Beim großen Grid (> 979px)
Hier ist die Ausgangsbreite von #container ganz normal 960px, also braucht man eine Breite von 960px - 320px = 640px.
#left { width: 320px; right:320px;}
#container { padding-left:320px; width:640px;}

Für Mitleser zur Erinnerung: Es geht um ein

• Full-Header-Layout
• mit Responsive Grid
• und Zweispaltigkeit aus dem Layout-builder.
• wobei die linke Spalte der Klasse grid4 entsprechen soll.

Das ist sozusagen die höchste Schwierigkeitsstufe. Zen für Fortgeschrittene ;-)

Hallo Peter,

habe die Werte so übernommen, klappt so leider nicht! Habe es auch mit 268px versucht (4x 62px= 248 + 2x10 padding) klappt auch nicht.
Aber wir kommen der Sache schon näher die linke Spalte rutscht nur links raus, die Breite von #container müßte stimmen.

Grüße aus Ludwigsburg
Jochen Kubik


P.S.: Vielen Dank für die Beförderung in den ZEN ;-)


Grüße aus Ludwigsburg
Jochen Kubik

268px ist definitiv falsch.

Ich hatte oben für #left eben das right:248px vergessen. Probiere bitte nochmal. Bei mir im Webinspektor passt es jetzt.

Ja, sehr cool!

Jetzt stimmt's!
Auch wenn ich mich jetzt wieder aus dem ZEN verbanne: was macht das "right"?
Ist mir schon gestern aufgefallen, aber habe es einfach ignoriert, hat aber nicht geholfen ;-)

Grüße aus Ludwigsburg
Jochen Kubik

Zitat:

---

Zitat von kubjo

Auch wenn ich mich jetzt wieder aus dem ZEN verbanne: was macht das "right"?
Ist mir schon gestern aufgefallen, aber habe es einfach ignoriert, hat aber nicht geholfen ;-)

---

Das right schiebt #left an die richtige Position.

Um das zu verstehen, befolge Thomas Vorschlag in #8 weiter oben:
http://pmueller.de/blog/vortrag-cont...dtag-2013.html

Oder komme in meine Seminare bei Boldt-Training oder zu unserem Workshop auf der Contao-Konferenz 2013 ;)

Das Thema ist sehr interessant.

em Kann ich da evt paar Fragen stellen..

- Macht es sinn auf einer Page einige Seiten mit Holygrail und Grid - und einige Seiten der selben Page nur Grid (zB Home, oder wo es kein Sub menu hat) zu erstellen?

- Muss man beim Grid immer grid angeben auch bei grid12 (ganze Seitenbreite) ?

- Ich krieg es nicht hin bei media-query min und max width zu definieren. Was mache ich da falsch? Eine Definition geht zB (min-width: 960px)

Kann mir da jemand Tips geben..

Zitat:

---

Zitat von MacPix

Das Thema ist sehr interessant.

em Kann ich da evt paar Fragen stellen..

- Macht es sinn auf einer Page einige Seiten mit Holygrail und Grid - und einige Seiten der selben Page nur Grid (zB Home, oder wo es kein Sub menu hat) zu erstellen?

- Muss man beim Grid immer grid angeben auch bei grid12 (ganze Seitenbreite) ?

- Ich krieg es nicht hin bei media-query min und max width zu definieren. Was mache ich da falsch? Eine Definition geht zB (min-width: 960px)

Kann mir da jemand Tips geben..

---

1.) Kann ich jetzt mir nicht so richtig vorstellen, wie Du das meinst???
2.) Muß nicht, ist aber empfehlenswert, man vermeidet so kleiner Irritationen, wenn mal was hinrutscht, wo es eigentlich nicht hin gehört ;-)
3.) Neues CSS - und unten bei Media-Query : "(min-width:768px) and (max-width:979px)" eingeben,
nochmal neues CSS - und unten bei Media-Query : "(max-width:767px)" eingeben, fertig!


Grüße aus Ludwigsburg
Jochen Kubik

Zitat:

---

Zitat von MacPix

- Macht es sinn auf einer Page einige Seiten mit Holygrail und Grid - und einige Seiten der selben Page nur Grid (zB Home, oder wo es kein Sub menu hat) zu erstellen?

---

Ja klar. Wenn du auf einigen Seiten eine Seitenspalte benötigst, zum Beispiel für Frontend-Module, die auf mehreren Seiten erscheinen sollen, nimmst du ein Spaltenlayout vom Layout-Builder. Darin kannst du dann mit dem Responsive Grid arbeiten, solange du dich bei den Spalten an die entsprechenden Masse hältst.

Zitat:

---

Zitat von MacPix

- Muss man beim Grid immer grid angeben auch bei grid12 (ganze Seitenbreite) ?

---

Theoretisch nicht immer, aber ein Grid besteht ja aus Zeilen, und wenn du nun in einer Zeile grid4 und grid8 hast, dann wird das gefloatet. Wenn die nächste Zeile nun keine Gridklasse hat und auch nicht anderweitig gefloatet wird, dann hat sie keinen Grund, in der nächsten Zeile anzufangen. Es sei denn du clearst sie. Zum Beispiel mit einem von Hand eingefügten <br class="clear">. Und dann ist es fast einfacher, grid12 zuzuweisen ;)

Zitat:

---

Zitat von MacPix

- Ich krieg es nicht hin bei media-query min und max width zu definieren. Was mache ich da falsch? Eine Definition geht zB (min-width: 960px). Kann mir da jemand Tips geben..

---

Dazu müsste man wissen, wie du das bis jetzt versucht hast. Hast du kein Medium angegeben? Ist ja eine "Media"-Query...

Bei internen Stylesheets schreibst du ins Feld "Media Query" zum Beispiel screen and (max-width: 767px). Ein Beispiel steht aber auch in der Mini-Hilfe unterhalb des Eingabefeldes.

Besten Dank pmmueller für deine Tips

Ich werde diese ausprobieren.

Danke wünsche einen schönen Abend

Mein Kopf und Grid'n'Holygrail


Bei einem 2spalten muss man die linke Spalte auch ein grid2 oder grid 3 geben? zB Subnavi?
Das Problem ohne verkleinert sich nicht Wie die andern?

Dann ist mir die linke spalte von grid2 zu klein und grid3 fast zu gross. ich habe jetzt die briete Linke spalte 210px.

Wie Ihr auf dem Bild seht, ist der Inhalt spalte links ohne grid, aber der auch mit grid keinen abstand links macht nur rechts von der seite. Habe keine CCS definition von padding/margin so vile ich weiss.



2. Frage
Ich möchte auf der Page mal 1 Spalte und 2 Spalten haben. da muss ich ja mehrere CSS haben. zB beim Container mal 960px und mal 740px.
Macht ihr immer ganze CSS oder nur das was ändert als zweites CSS unten dran? Mit den verschiedenen CSS für die Geträten wie Computer, Tablet und Smartphones kommen einige CSS zusammen. und zB eine Farbe ändern were ja noch cool wenn mal das nur einmal machen muss.

Zitat:

---

Zitat von MacPix

Bei einem 2spalten muss man die linke Spalte auch ein grid2 oder grid 3 geben? zB Subnavi?
Das Problem ohne verkleinert sich nicht Wie die andern?

---

Du musst den Spalten eine Breite geben, die einer der Gridklassen entspricht, damit auch die Spalte in das Raster passt.

Wenn du das manuell machst, dann musst du beide Gridvarianten manuell nachbauen, mit Media Query.
Wenn du das per Gridklasse machst, dann übernimmt Contao diese Arbeit für dich. Gridklasse an Spalten geben kannst du aber nur im Seitentemplate fe_page.

Zitat:

---

Zitat von MacPix

Ich möchte auf der Page mal 1 Spalte und 2 Spalten haben. da muss ich ja mehrere CSS haben. zB beim Container mal 960px und mal 740px.
Macht ihr immer ganze CSS oder nur das was ändert als zweites CSS unten dran? Mit den verschiedenen CSS für die Geträten wie Computer, Tablet und Smartphones kommen einige CSS zusammen. und zB eine Farbe ändern were ja noch cool wenn mal das nur einmal machen muss.

---

Da komme ich mit den Begrifflichkeiten nicht ganz klar. Du willst nicht wirklich auf einer "Page" mal 1 und mal 2 Spalten haben, sondern du meinst die Site damit. Richtig? Das kannst du doch über Seitenlayouts regeln. Dann schreibt Contao das CSS für dich.

Und mit "CSS" meinst du "Stylesheet", oder? Gegenfrage: Schreibst du externe Stylesheets? Oder benutzt du den CSS-Editor von Contao (interne Stylesheets)?

Zitat:

---

Zitat von pmmueller

Du musst den Spalten eine Breite geben, die einer der Gridklassen entspricht, damit auch die Spalte in das Raster passt.

Wenn du das manuell machst, dann musst du beide Gridvarianten manuell nachbauen, mit Media Query.
Wenn du das per Gridklasse machst, dann übernimmt Contao diese Arbeit für dich. Gridklasse an Spalten geben kannst du aber nur im Seitentemplate fe_page.
O daran hab ich nicht gedacht in fe_page die Gridklasse zu geben. Das muss ich versuchen. Danke


Da komme ich mit den Begrifflichkeiten nicht ganz klar. Du willst nicht wirklich auf einer "Page" mal 1 und mal 2 Spalten haben, sondern du meinst die Site damit. Richtig? Das kannst du doch über Seitenlayouts regeln. Dann schreibt Contao das CSS für dich.

Und mit "CSS" meinst du "Stylesheet", oder? Gegenfrage: Schreibst du externe Stylesheets? Oder benutzt du den CSS-Editor von Contao (interne Stylesheets)?

---

Ich benutze den CSS-Editor von Contao. ja mit CSS meinte ich den Stylesheet.
Ich meinte es so, dass ich auf einer Website Seiten habe die einspaltig sind (zB. Home) und die einten Seiten der Website zweispaltig. Wenn ich denn Wrapper, header und footer 100% habe, sollte ich den Container per css die Breite ändern. (einspaltig 960px und zweispaltig 720px) brauche ich dafür 2 Stylesheet?


Danke deiner Hilfe..

Du erstellst dir einfach zwei Seitenlayouts. Eins für die Startseite und eins für die zweispaltigen Seiten. Contao erstellt dann das nötige CSS für dich und bindet es in einem Style-Block im <head> der Webseiten ein.

Wenn du mit dem internen CSS-Editor arbeitest, musst du für jede Media Query ein neues Stylesheet erstellen. Das ist aber nicht weiter schlimm, da Contao alle internen Stylesheets zusammenfasst, komprimiert und als ein einziges Stylesheet ausliefert.

Ich versuche mich auch gerade einige Variationen mit dem Grid zu testen.

Im Seitenlayout habe ich in der Hauptspalte eine Navigation eingebunden, dieser hab ich im Modul die Klasse grid3 gegeben.
Wenn ich nun noch einen Artikel daneben positioniere z.B. grid3 offset3 sieht das bei volle Fensterbreite gut aus.

Wenn ich nun das Fenster zusammenschiebe, dachte ich, dass eigentlich die Navigation über dem Artikel stehen müsste. Bei mir leider nicht.
Ist mein Vorgehen so richtig? Stimmt die Ansicht?

Link?

Ohne Quelltext bleibt das Rätselraten...

Aber wieso gibst du dem Artikel offset3? Der steht doch auch nur mit grid3 daneben? Der Artikel steht in der schmalen Variante ja unter der Navi, aber ich denke mal, dass der Freiraum links die offset-Klasse ist.

Mit contao 3.1 haben sich einige probleme gelösst.

ZB eines meiner Hauptprobleme, dass es ein Grid die Breite auch im Mobile Version gleich breit blieb und nicht fluid war. Das war mit ab 3.1 nach dem update ok.

Hier möchte ich mich auch bedanke für all eure tips ..

Zitat:

---

Zitat von MacPix

ZB eines meiner Hauptprobleme, dass es ein Grid die Breite auch im Mobile Version gleich breit blieb und nicht fluid war. Das war mit ab 3.1 nach dem update ok.

---

"Mobile" ist mein neuer Lieblingsbegriff, weil das so schön nichtssagend ist. Kurz und lesenswert: "No more mobile" ;)

Im Ernst, ich verstehe nicht ganz, was du meinst:

• Was genau meinst du mit "Mobile Version"?
• Viewport kleiner als 768px?
• Oder "mobiles Seitenlayout"?
• Und was meinst "gleich breit blieb und nicht fluid war"?

Da hat sich meines Wissens zwischen 3.0.6 und 3.1 außer ein paar Kleinigkeiten in grid.css nicht so ganz viel geändert. Oder anders gesagt: Das meiste hätte auch früher schon funktionieren müssen.

Zitat:

---

Zitat von pmmueller

"Mobile" ist mein neuer Lieblingsbegriff, weil das so schön nichtssagend ist. Kurz und lesenswert: "No more mobile" ;)

Im Ernst, ich verstehe nicht ganz, was du meinst:

• Was genau meinst du mit "Mobile Version"?
• Viewport kleiner als 768px?
• Oder "mobiles Seitenlayout"?
• Und was meinst "gleich breit blieb und nicht fluid war"?

Da hat sich meines Wissens zwischen 3.0.6 und 3.1 außer ein paar Kleinigkeiten in grid.css nicht so ganz viel geändert. Oder anders gesagt: Das meiste hätte auch früher schon funktionieren müssen.

---

Ja bei der Mobile meinte ich das Layout (Viewport kleiner als 768px), wo dann der Inhalt sicher immer der Browsergrösse anpasst.

Mein Problem war:
Die Artikel mit einem grid class hatten immer diese Breite der grid class. Ausser wenn ich keine angegeben habe , hat sich der Inhalt angepasst. (habe leider kein Bild mehr)

Als ich dann das update auf 3.1 machte, aber keine css oder irgend was geändert habe, ging es super. Ich weiss nicht was anders ist.

Wollte nur sagen, dass bei 3.1 bei mir es super funktioniert. Da ich keine änderung sonst vorgenommen habe, dachte ich ein tip wäre Contao 3.1 zu probieren.