Inhalte in Divi.Container

[xylo25]

Hallo zusammen,

ein Freund von mir nutzt ein WordPress Template. Nun stößt er an seine Grenzen. Ich habe zwar durchaus mehr Kenntnisse als er, aber auch ich weiß nicht ganz genau was ich zu tun habe.

Das Template lässt individuelles CSS zu.

Um das Problem zu verstehen, würde ich euch bitten http://musikschule-neheim.de zu besuchen und den div.container "BEIGEBRACHT VON DEINEN LEHRERN" zu besuchen.

Er möchte weitere Lehrer hinzufügen. Diese tauchen dann allerdings unter und nicht neben den bisherigen Lehrern auf.

Was ich persönlich glaube, ist, dass ich die Zeilenbreite in div.row anpassen muss. Liege ich damit richtig? Wenn ja, wie löse ich das per Custom CSS?

Tut mir leid für eine blutige Anfängerfrage.

Ich würde mich wirklich über Antworten freuen.

[Bernd]

Du hast ein Grid-System

col-lg-3 col-sm-3

das heißt es werden immer 4 in eine Reihe gepackt, denn 4*3 ist 12. Alles weitere werden in eine neue Reihe gepackt.

[xylo25]

Danke Bernd.

Bootstrap Grid, nicht wahr? Ja, hatte ich auch gesehen, ist es darstellbar, dort 5 aufzulisten ?

[Bernd]

Hallo,

genau, du bindest auf deiner Seite Bootstrap ein:
http://musikschule-neheim.de/wp-content/themes/zerif-pro/css/bootstrap.min.css?ver=5.0.3

12/5 wären 2,4. Dieses ist mit einem Bootstrap Grid soweit ich weiß nicht möglich. Da müsstest du dir dann etwas eigenes bauen. Aber findest du nicht 5 nebeneinander sieht etwas sehr eingeengt aus?

[Gunnar Bittersmann]

@@Bernd

Aber findest du nicht 5 nebeneinander sieht etwas sehr eingeengt aus?

Nicht, wenn man die volle Viewportbreite nutzt.

LLAP 🖖

[Gunnar Bittersmann]

@@xylo25

Um das Problem zu verstehen, würde ich euch bitten http://musikschule-neheim.de zu besuchen

Das nächste Mal bitte verlinken (🔗-Button überm Eingabefeld oder wie in der Hilfe beschrieben). Ich hab das mal für dich berichtigt.

und den div.container "BEIGEBRACHT VON DEINEN LEHRERN" zu besuchen.

Er möchte weitere Lehrer hinzufügen. Diese tauchen dann allerdings unter und nicht neben den bisherigen Lehrern auf.

Wenn sechs nebeneinander passen soll es also so aussehen:

┌───┬───┬───┬───┬───┬───┐
│   │   │   │   │   │   │
└───┴───┴───┴───┴───┴───┘

Wenn es nun aber sieben auf einen Streich sind, aber nur sechs nebeneinander passen, wie soll es dann aussehen?

┌───┬───┬───┬───┬───┬───┐
│   │   │   │   │   │   │
├───┴───┴───┴───┴───┴───┤
└───────────────────────┘

oder

┌───┬───┬───┬───┬───┬───┐
│   │   │   │   │   │   │
└───┴───┴─┬─┴─┬─┴───┴───┘
          │   │
          └───┘

oder

┌───┬───┬───┬───┬───┬───┐
│   │   │   │   │   │   │
├───┼───┴───┴───┴───┴───┘
│   │
└───┘

Was ich persönlich glaube, ist, dass ich die Zeilenbreite in div.row anpassen muss. Liege ich damit richtig?

Nein, nicht wirklich. Wenn Bootstrap, dann müsste der Container "container-fluid" sein. Dann kannst du auf großen Viewports auch sechs Boxen nebeneinander tun – aber nicht fünf oder sieben oder acht … Außerdem ist das ziemlicher Aufwand, zunächst bei der Entwicklung und hinterher bei der Pflege.

Wesentlich einfacher ist es ohne Bootstrap – mit den CSS-Bordmitteln: CSS Grid. Beispiel 1 ∙ Beispiel 2

LLAP 🖖

[marctrix]

Hej xylo25,

Was ich persönlich glaube, ist, dass ich die Zeilenbreite in div.row anpassen muss. Liege ich damit richtig? Wenn ja, wie löse ich das per Custom CSS?

Man kann alles mit eigenem CSS überschreiben, das macht aber keinen Sinn. Vermutlich hat Divi dafür eigene Möglichkeiten. Eigenes CSS und Divi-Bordmittel zu mischen, führt wohl zu chaotischen zuständen, die dich bei der späteren Pflege der Seite in den Wahnsinn treiben werden.

Ich setze so etwas nicht ein, arbeite bei Wordpress mit deutliche einfacheren themes und die passe ich dann nur über eigenes CSS an — ein einziges Projekt habe ich dagegen mit Divi übernommen und muss nun damit arbeiten. Hier verwende ich überhaupt kein eigenens CSS, kann mir aber vorstellen, eigenes CSS mal für Farben o.ä. Anpassungen zu schreiben.

All das hier Gesagte gilt grundsätzlich für jedes Theme, PlugIn, Layout, das auf Bootstrap basiert.

Und sobald wie möglich immer auf das aktuelle Bootstrap (selbst das war in mancher Hinsicht schon zum Erscheinungstermin veraltet) umstellen, Bootstrap 3 ist Mist!

Marc