Spalte wird unter Viewportbreite von 767px nicht 100% breit

[stephangunnar]

Ich habe im Layoutbuilder "Responsive Grid" aktiviert und für mein zweispaltiges Layout den Artikeln für die breite linke Spalte (=Hauptspalte) die Klasse "grid8" gegeben, und den Artikeln in der schmalen rechte Spalte die Klasse "grid 4".

Wenn ich jetzt den Browser zusammenschiebe geht die rechte Spalte wie gewünscht unter die linke Spalte, wird aber nicht 100% breit angezeigt, siehe http://www.das6040.de. Warum ist das so, ich dachte bei dem Responsiv Grid unter 767px wird immer alles 100% breit? Ich könnte natürlich mit einem mediaquery manuell die Klasse "grid4" auf 100% width setzen. Aber dass müsste doch das Responsiv Grid automatisch machen?

[kubjo]

Hallo stephangunnar,

ich würde auch erwarten, daß die rechte Spalte dann 100% breit wird.
Ich habe eine Seite, die ähnlich aufgebaut ist. Nur daß hier die linke Seite nach unten rutscht und dann aber 100%breit wird.
Woran das bei Dir liegt kann ich leider nicht sagen. Was mich auch wundert, ist, daß das große Bild nicht skaliert, wenn man den Browser zusammen schiebt, hast Du hier eine feste Breite vergeben?

Mir fallen aber an Deiner Seite noch ein paar Kleinigkeiten auf, falls Du interessiert bist, nenne ich Dir gerne meine "Bedenken".

Grüße aus Ludwigsburg
Jochen Kubik

[kubjo]

Hallo stephangunnar,
jetzt habe ich eine Idee!
Wenn Du im Layoutbuilder ein 2-spaltiges Layout gewählt hast dann brauchst Du den Spalten keine Grid-Breite zuweisen.
Nur den Inhaltselementen werden die grid1-12 zugewiesen. Die Spaltenbreite ereichst Du indem Du im Layoutbuilder die Breiten in px mitgibst.
Ich hatte einen sehr lehrreichen thread mit Peter Müller hier. Da kannst Du sicherlich die nötigen Infos rausziehen!

Bitte beachte auch bugbusters Beitrag #10 in selben thread, gaaaanz wichtig!


Grüße aus Ludwigsburg
Jochen Kubik

[pmmueller]

@stephangunnar - da bist du glaube ich einem Bug auf der Spur.

Meistens werden die Grid-Klassen an Inhaltselemente gegeben. Du hast sie an den Artikel vergeben:
.mod_article.grid4 { width: 320px;}

Normalerweise wird unter 768px wie von dir erwartet die Breite auf auto gesetzt:
*[class*="grid"] { ... ; width:auto; }

Bei Inhaltselemente klappt das wunderbar. Bei Artikeln nicht, denn der erste Style (.mod_article.grid4) gewinnt wegen höherer Spezifität. Wenn man im Firebug den zweiten Style ändert (*[class*="grid"]), wird die Spalte wie erwartet auf auto gesetzt.

Dabei gibt es zwei Möglichkeiten:
1. Per "Importance": width:auto !important
2. Durch Erhöhung der "Spezifität", zum Beispiel #wrapper *[class*="grid"]

EDIT
siehe Ticket #5584. Bug ist behoben und Vorschlag Nr. 1 mit !important wird in Contao 3.1 drin sein.

[stephangunnar]

Erstmal danke für Eure Hilfe. Das mit dem zweispaltigen Layout ist eine gute Idee, die ich heute Abend mal ausprobieren werde, obwohl ich eigentlich gerade das mit den Spalten im Layoutbuilder gerade nicht machen wollte, aber wenn es erstmal hilft, dann wäre es super.

Das mit der Größe des Bildes ist mir auch schon zufällig aufgefallen.

<img src="http://www.das6040.de/files/6040/content/images/kneipe_und_biergarten5_gr.jpg" width="400" height="299" alt="">

Das muß ich mir heute Abend mal genauer anschauen.

Mir fallen aber an Deiner Seite noch ein paar Kleinigkeiten auf, falls Du interessiert bist, nenne ich Dir gerne meine "Bedenken".

Welche sind denn die weiteren Kleinigkeiten? Ich bin sehr interessiert etwas zu lernen.

[kubjo]

Hallo stephangunnar,

- als erstes fällt mir als Fotograf natürlich die schlechte Qualität des großen Bildes in Sachen Schärfe auf. Da mußte Du meines Erachtens nochmal hin zum Fotografieren.

Die beiden Logos (facebook und qype) sind auch schlecht in der Qualität und sehr groß.

Dem #container würde ich unten noch ein margin geben, damit des aussieht wie ein Blatt, das auf den Tisch liegt. (Geschmackssache)

Das "bar food music" unter dem 60 40 kommt in schwarz sehr schlecht zur Geltung, vielleicht hilft eine hellere Farbe, oder so. (Geschmackssache)

Die rote Navi (Getränke Speisen Veranstaltungen) ist nicht exakt linksbündig

Die weißen Stege zwischen den Elementen und an den Rändern würde ich gleichmäßig machen, wenn's geht. (Geschmackssache)

Ich hoffe die "Kritik" ist nicht zu heftig, vieles ist wie gesagt Geschmacksache.
Ich finde es eine sehr schöne Seite!


Grüße aus Ludwigsburg
Jochen Kubik


P.S. Wenn es nur um die Startseite geht, die 2-spaltig werden muß, dann würde ich es nicht mit dem Layout lösen, da reicht die grid-Lösung völlig aus!
Das wird nur unnötig kompliziert, wie Du im o.g. thread lesen kannst muß man bei einem Element das über die ganze Breite gehen soll ganz schön tricksen.