"Responsive"-Frage

Hallo zusammen,

ich habe mich durch unzählige Beiträge zum Thema gekämpft, aber immer noch ein Verständnisproblem.

Ganz konkretes Beispiel:
Ich möchte eine Website, die...
- bei großem Desktop eine Breite von bspw. 970 px hat
- bei Tablets und Smartphones die Floats auflöst, also untereinander anordnet
- ... plus die Menüs ändert

Problem für mich: Es gibt zu viele Wege PLUS ich bin mir nicht sicher, welche Variante in 3.1 am sinnvollsten und einfachsten ist (da ja entsprechende Features bereits mit dem Core bzw über Optionen kommen). Ich sehe also den Wald vor lauter Bäumen nicht...

Mein Ansatz bisher:
- Layout Builder aktiviert
- 12-Spalten-Grid NICHT aktiviert
- mobile Layout mit den entsprechenden Modulen für mobile

Problem 1:
Ich habe im #header 3 große Grafiken nebeneinander, definiert mit fixer Breite (was ein Fehler sein könnte, aber aber siehe *). Mache ich die Seite langsam schmaler, wollen die sich untereinander anordnen - was aber nicht funzt, da diese dann quasi unter #main verschwinden, also nicht mehr sichtbar sind. Irgendwie logisch, da #header ja eine definierte Höhe hat. Schiebe ich die Seite aber noch kleiner (Smartphone-Bereich), machen die Grafiken dann doch wieder, was sie sollen: *Kleiner werden, dann sind alle sichtbar.

Problem 2:
Brauche ich media queries? Solche sind ja m.W. schon im Core enthalten. Wenn ich mit media queries arbeite, warum dann noch das mobile Layout - in dem Fall könnte ich doch einfach im einzigen Layout sämtliche Module definieren PLUS im jeweiligen css einfach die nicht gewünschten Module per display:none ausblenden?

Ich hoffe, Ihr könnt meinen Knoten lösen.... Vielen Dank vorab!

Gruss
FrankiLi

Mobiles Layout: Das ist quasi ein separates Layout, das durch den Server ausgeliefert wird, wenn er feststellt, dass ein Device "mobil" ist (RESS). Lies dazu mal Peter Müller's und Thomas Weitzel's Vortrag von der Contao-Konferenz - da wird sich für Dich der Dschungel schon etwas lichten.

Ich weiß, was das mobile Layout ist, aber danke...

Jemand einen Tipp für mich, vor allem zu "Problem 1"?

Lass die Höhe weg im Seitenlayout und definiere sie im CSS als min-height.

Dadurch wird es immer mindestens so hoch wie deine Angabe, kann aber wachsen.

Die einfachste Variante ist direkt über die Browserklassen.

Code:

---

body.mobile {
 // mobiles css
}

---

Um die Browsergrößen zu beeinflussen kannst du Media-Queries verwenden:

Code:

---

@media all and (max-width: 960px) { // wenn Browser kleiner als 960px

 body.mobile {
  // mobiles css unter 960px
 }

 body.mobile header .logo {
  float:none;
}

}

---

Zitat:

---

Zitat von Flex

Lass die Höhe weg im Seitenlayout und definiere sie im CSS als min-height.

Dadurch wird es immer mindestens so hoch wie deine Angabe, kann aber wachsen.

---

Perfekt, danke

Zitat:

---

Zitat von valentin_

Die einfachste Variante ist direkt über die Browserklassen.

Code:

---

body.mobile {
 // mobiles css
}

---

Um die Browsergrößen zu beeinflussen kannst du Media-Queries verwenden:

Code:

---

@media all and (max-width: 960px) { // wenn Browser kleiner als 960px

 body.mobile {
  // mobiles css unter 960px
 }

 body.mobile header .logo {
  float:none;
}

}

---

---

Die Klasse .mobile hat also den gleichen Effekt wie ein "Mobile Layout" mit entsprechend separatem CSS in Contao, richtig? (ich arbeite mit dem internen css-editor, deshalb wäre der Weg wohl der durchschaubarere für mich).

Danke auch Dir!

Kann natürlich auch sein ... ich arbeite noch nicht mit Contao3, dann könntest du wohl auch das Mobile Layout verwenden.

Zitat:

---

Zitat von FrankiLi

Ganz konkretes Beispiel:
Ich möchte eine Website, die...
- bei großem Desktop eine Breite von bspw. 970 px hat
- bei Tablets und Smartphones die Floats auflöst, also untereinander anordnet
- ... plus die Menüs ändert

---

Das macht der Layout-Builder von alleine. Es gibt einen Breakpoint bei 768px. Darunter werden die Floats automatisch aufgelöst. Die Navigation gestaltet du entsprechend in zwei Stylesheets mit verschiedenen Media Queries.

Zitat:

---

Zitat von FrankiLi

Mein Ansatz bisher:
- Layout Builder aktiviert
- 12-Spalten-Grid NICHT aktiviert
- mobile Layout mit den entsprechenden Modulen für mobile

---

Zitat:

---

Zitat von FrankiLi

Brauche ich media queries? Solche sind ja m.W. schon im Core enthalten. Wenn ich mit media queries arbeite, warum dann noch das mobile Layout - in dem Fall könnte ich doch einfach im einzigen Layout sämtliche Module definieren PLUS im jeweiligen css einfach die nicht gewünschten Module per display:none ausblenden?

---

Mobiles Seitenlayout vs. Layout-Builder mit Media Query:
https://community.contao.org/de/show...l=1#post269803

Nutzeffekt: Mit einem mobilen Seitenlayout könntest du zum Beispiel für mobile Geräte ein komplett anderes Navigationsmodul ausliefern.