No Responsivity / Contao 3 mit responsive Grid

[imacfan]

Hallo zusammen,

irgendwie stehe ich völlig auf dem Schlauch. Folgende Konfiguration:

- Contao 3.0.1, Responsive Grid, CSS-Reset, jQuery lokal
- Ein Karussel ist aktiv: Größe des Karussels automatisch, Größe der Elemente fest (sind nur Bilder gleicher Größe)
- Caroufredsel läuft in einem Artikel und "caroufredsel wrapper start" hat eine Größenzuweisung (.grid12)
- Wenn ich das Browserfenster "zuschiebe", wird nichts skaliert sondern nur in der Breite abgeschnitten.

Vielen Dank für eine Erhellung.

Gruß
Jörg

[Dirch]

Hallo Jörg,

da du "responsive" bei deinen Einstellungen nicht erwähnt hast vermute ich mal, daß du es nicht eingeschaltet hast. Im Bereich "Darstellung der Elemente" gibt es eine Checkbox "Responsive". Bei diesem Modus ist es zwingend notwenig, daß du die gleichzeitig sichtbaren Elemente angibst (sonst fehlt dem Script die Berechnungsgrundlage) und entweder bei der Element-Höhe (nur 1 sichtbar) oder der Karussell-Höhe (mehrere sichtbar) "variabel" auswählst. "variabel" deshalb, damit der Slider in der Höhe schrumpft, falls die Bilder kleiner werden. Beispiel kannst du hier sehen: http://www.werk36.de (auch wenn sich dort wegen unterschiedlicher Textmengen die Höhen unterschiedlich ändern) oder hier: http://www.expostar.ch/messebau-beispiele.html

Grüße...
...Dirk

[imacfan]

Hi Dirk,

danke für die nächtliche Antwort. "Responsive" hatte ich nicht erwähnt, war aber ausgewählt. Zur Sicherheit ein screen der jetzigen Einstellung. Vorher hatte ich bei der Elementgröße einen festen Wert. Eine Änderung ist nicht eingetreten.

screen.png

Gruß
Jörg

[Dirch]

Daran hatte ich gestern nacht nicht gedacht. Dem caroufedsel_wrapper sollte man keine Größe zuweisen, da das Script dieses DIV für sich selbst mit den Größenangaben setzt die gerade aktuell sind. Daher wurde der Slider bei dir auch abgeschnitten. Setze deine Größe auf das Eltern-DIV (caroufedsel_skin) oder auf ce_caroufedsel. An diesen beiden Stellen beschränkst du den gesamten Slider auf deine Größe und der Slider selbst sollte sich daraufhin innerhalb dieser Grenzen skalieren.

Deine Bilder sollten wenigstens so groß sein wie diese Grenzen, da sie nur kleiner skaliert werden. Es sei denn du weist ihnen per CSS eine fluide Breite zu (z.b. 100%). Das Handicap eines Inhalts-Sliders, der von seinen Inhalten keine Ahnung hat und diese sich daher nur an den natürlichen Größen orientieren.

[imacfan]

Hallo Dirk,

ich habe am Element "grid12" entfernt und im CSS ".ce_caroufredsel" die Größe der Bilder in px zugewiesen. Das ändert auch nichts. Ich hatte vorher auch probiert, den Bilder eine fluide Größe zu geben. Dann werden sie zwar skaliert aber caroufredsel bleibt bei der ursprünglichen Höhe, so dass darunter ein unschöner Abstand entsteht.

Sonntägliche Grüße
Jörg

[Dirch]

Ich hatte vorher auch probiert, den Bilder eine fluide Größe zu geben. Dann werden sie zwar skaliert aber caroufredsel bleibt bei der ursprünglichen Höhe, so dass darunter ein unschöner Abstand entsteht.

Ja - deshalb schrieb ich, daß du bei der Element-Höhe "variabel" auswählen sollst. Dann beschränkt er die Höhe des Sliders, auf die Höhe der sichtbaren Elemente und der Slider schrumpft und wächst in der Höhe wie du das bei der schweizer Beispiel-Seite sehen kannst. Schau dir dort doch einmal den Quelltext an. Diese Seite ist auch mit einem Responsive-Grid gemacht.

Eigentlich geht es so bei Slidern mit einem Bild:

- Element-Höhe variabel
- responsive
- Anzahl sichtbarer Elemente: 1

und noch eine Breite des Sliders festlegen - entweder "flüssig" in den Slider-Einstellungen oder als äußere feste Begrenzung im CSS an den besagten DIVs. Das klappt bei mir einwandfrei so. Vielleicht beißt sich bei dir noch etwas. Eigentlich ist es meist nur CSS was die Sache verhindert/verrupft. Hast du nen Link, dann werfe ich einen schnellen Blick drauf.

[imacfan]

Die Zuweisung der fluiden Größe hatte ich über das CSS gemacht. Ich wollte damit nur aussagen, dass die Bilder dann skaliert werden. Das machen alle anderen Bilder auf der Seite aber so oder so. Ansonsten habe ich alle vorgeschlagenen und sonst halbwegs sinnvollen Varianten durch. Irgendetwas beharkt sich.

Die Seite ist noch nicht online, geht aber in den nächsten Tagen in den Testbetrieb. Ich schicke dir dann einen Link, wenn ich das noch nicht gelöst habe. Die Beispielseite schaue ich mir nochmal an, vielleicht finde ich ja etwas.

Vielen Dank für dein Engagement.

[kischd]

Hallo Dirk, vielleicht könntest du mir auch einen kleinen Tipp geben.
Ich habe die Einstellungen nach dem Wiki gemacht.
Ein Inhaltselement mit 2 Slides angelegt.

Ich möchte das ganze Responsive machen und das ganze mit einem Hintergrundbild hinterlegen, das nicht slidet.
Wie kann ich das einstellen, dass ich ein Hintergrundbild in voller Größe hinter den Slider lege der sich dann responsive verkleinert? geht das?

[Dirch]

Hallo Mark,

mir wird nicht ganz klar was du genau machen willst. Ok das Hintergrundbild soll hinter dem Slider und in voller Größe liegen, aber meinst du mit voller Größe jetzt das gesamte Fenster füllend oder nur den Bereich des Slider-Containers? An sich ist das doch eine Standard-Funktion von CSS. Du kannst auf den .ce_caroufredsel doch ein Hintergrundbild mit CSS legen. Der Slider liegt dann oben drauf und scrollt das Hintergrundbild nicht mit, da dieses kein Teil der Slider-Elemente ist.

Das responsive ist dann wiederum eine Sache der Einstellungen für den Slider. Die sehen soweit ganz gut aus oder ging dort etwas nicht? "flüssig" heißt in dem Fall immer prozentual gesehen vom Eltern-Rahmen. Hier kannst/mußt du ggf. diesen Rahmen mit CSS noch festlegen.

Viele Grüße...
...Dirk

[kischd]

Hallo Dirk,
Genau ich will hinter den slider ein Bild legen.
Aber wenn ich das per CSS dahinterlege skaliert sich das Bild nicht klein, weil ich ja eine Größe vergebe. Oder übersehe ich etwas?

[Dirch]

doch klar: http://www.css3.info/preview/background-size/

Du vergibst dort dann ebenfalls prozentuale Werte und alles sollte gut sein.

[kischd]

Hallo Dirk,

ich hab dem .ce_caroufredsel jetzt ne Breite 960px und ne höhe 180px gegeben.
Ich habs mit background-size: contain / cover / 100% auto / ... versucht.
oder hab ich das falsch verstanden. Aber eigentlich müsste doch das .ce_caroufredsel auch kleiner werden wenn ich das Fenster klein ziehe oder?

[Dirch]

In diesem Fall nicht. Wenn du dem äußeren Container feste Werte gibst, kann dieser natürlich nicht kleiner werden. Hier müßtest du also etwas prozenturales einstellen. Dieser Container muß ja wachsen und schrumpfen können. Und das vererbt sich dann nach innen/tiefer...