Layout am Handy; weitere Fragen

**theHubi** · 24.06.2014, 09:02

Guten Tag Community.
Ich habe gestern eine Seite mit Contao erstellt und wollte davon nun eine mobile-Version erstellen.
Für Tablets sieht die Seite schon ideal aus, aber auf dem Handy nicht.

Soweit ich bisher gelesen habe, stellt Contao die Layout-Bereiche am Handy automatisch untereinander ein.
Kann mir das jemand bestätigen?

Ist es somit nicht möglich, links eine Navigationsleiste einzublenden (da sie immer unter #main rutscht)?

Gibt es eine Möglichkeit manuell das verwendete Layout am Handy umzustellen ohne jetzt ein ganzes Template umzuschreiben?

Was hat es mit der Klasse "mobile" an sich?

Viele Fragen, ich weiß. Aber bisher konnte ich mich auf das Wissen der Community verlassen.

Vielen Dank im Voraus

**theHubi** · 24.06.2014, 09:06

Die Seite

das ursprüngliche Design befindet sich auf Seiten Kontakt, Ausstattungsliste, Projektidee und Copyright
das "neue" wird wohl nachher so aussehen, wie auf der Willkommensseite

**Kahmoon** · 24.06.2014, 14:57

Am besten hier mal einlesen....um das Framework zu verstehen.

http://pmueller.de/blog/vortrag-cont...dtag-2013.html
http://www.frische-zitronen.de/2013/...obile-devices/
http://contaogrid.glen-langer.de/

Die Contao Breakpoints kannst du dir in der Datei assets/contao/css/responsive-uncompressed.css bzw. grid-uncompressed anschauen. Vor allem siehst du hier auch die Grid Klassen die du verwenden kannst/musst um eine mobile Darstellung anzupassen.

P.S. die Navigation oben ist im Firefox nicht klickbar weil du folgende Anweisung vergeben hast und der Container jetzt über dem Header liegt. Dann hau das lieber in die rechte Spalte statt Header.

Code:

#container, .inside {
    position: relative;
}

VG

**theHubi** · 24.06.2014, 15:13

Danke

Ja aktuell arbeite ich wieder an einer anderen Seite. Anweisung vom Chef : P
Da hab ich lustigerweise

#container, .inside {
position: relative;
}

gar nicht eingestellt. Mir kommts so vor, als würde er schon ein bisschen spinnen, weil nun schon 3 Startseiten im selben Contao-Verzeichnis sind : P

**theHubi** · 24.06.2014, 15:21

Hier sind alle CSS-Zeilen, die in diesem Layout verwendet werden:

css_all.png

ja, ich weiß, die Auflösung ist mies. Aber trotzdem solltest du sehen können, dass es keine Zeile mit #container gibt.

**Kahmoon** · 24.06.2014, 15:24

Dann ist da an anderer Stelle der Wurm drin. Der Header liegt auf jeden Fall unter dem Container weshalb er komplett nicht mehr nutzbar ist.

Aber dir gings ja auch um die Mobilansicht. Schau dir mal die Gridklassen. Damit geht das recht einfach.

**theHubi** · 24.06.2014, 15:29

soso...

Code:

assets/css/acf49b24b664.css

definitiv nicht von einem Mensch generiert.
Da bleibt nur die Frage: Why, Contao, why?

**theHubi** · 24.06.2014, 15:31

ja, es ging mir um die Mobilansicht. Aber leider bei einer anderen Website.
Ich mach sowieso in 30 Minuten Feierabend. Dann kann ich nochmal die alte Seite freischalten, damit du sehen kannst, worauf sich das mobile wirklich bezieht.

Aber wie schon gesagt: Danke für die ganze Hilfe bisher!

edit: Problem behoben. Wenn ich #header float:right ausblende (aber nicht lösche), funktioniert es...

**Kahmoon** · 24.06.2014, 15:33

Zitat von theHubi

soso...

Code:

assets/css/acf49b24b664.css

definitiv nicht von einem Mensch generiert.
Da bleibt nur die Frage: Why, Contao, why?

Das ist die komprimierte CSS Datei aus allen vorhandenen DAteien, damit nicht 10 CSS Files eingebunden werden müssen (Google Page Speed). Die erzeugt Contao automatisch. Debugmodus an...dann werden die Files einzeln eingebunden (Contao 3.3+)