Neu Rich Text - Responsive Design + Größe

Sonnenna

Aktives Mitglied
7. Januar 2021
40
4
Hallo liebes Forum,

ich erstelle gerade mit dem OPC Seiten wie "Startseite" oder "Über". Leider kenn ich mich mit CSS und Programmieren nicht so besonders aus, daher bitte ich um Verständnis, falls ich mich etwas laienhaft ausdrücke.

Ziel ist es ein Seiten-Layout mit mehreren Kacheln zu gestalten. Links Box/Kachel mit Text und rechts Box/Kachel mit einem Bild.
Darunter umgekehrt: links Bild rechts Text

Hier zum Verständnis:
1610049118310.png

Mein bisheriger Aufbau:
Container
Grid mit 2 Spalten
pro Spalte je ein Grid: 1x mit Header + Rich Text, 1x mit Bild
-> Hier die Nebenfrage, ob ich überhaupt in den Spalten nochmal ein Grid benötige?


1610049254316.png

Natürlich muss das Ganze auch responsive sein.

Und hier fangen dann leider die Probleme an: Das Bild passt sich perfekt an. Es ist immer quadratisch und passt sich an die Größe proportional an.
Leider klappt das beim Text gar nicht, da die Größe des Rich Texts nicht fixiert ist. Die "Box" mit dem Text ist z.B. länger / kürzer wie die "Box" mit dem Bild.
Ziel wäre, dass sich die "Box" mit dem Text genauso von der Größe verhält wie die "Box" mit dem Bild.

Hier ist das Problem ersichtlich:
(Mir ist bewusst, dass hier natürlich auch zu viel Text ist, was das Ganze noch verstärkt.)
1610049921512.png

Meine Frage also: Kann man für das Portlet Rich Text eine fixe Größe festlegen?
Geht es dann, dass der Text sich immer an die Größe der festen "Box" anpasst, indem zum Beispiel die Seitenränder (unter Layout) automatisch angepasst werden.

Ich konnte bisher nur die Seitenränder für alle Bildschirmgrößen einstellen. Einzeln einstellen geht leider nicht. Bzw. habe ich es nicht herausgefunden. Daher wäre auch die Frage, ob man die Layouteinstellungen (z.B. Seitenränder) für jede Bildschirmgröße (wie XS, SM, MD und LG) einzeln und unterschiedlich einstellen kann?
Und ist es dann auch möglich, dass der Text und die Überschrift immer mittig in dieser "Box" sind?

Also nicht wie hier in der "Fullwide-Ansicht":
1610049707801.png

Zur Info:
Bei schmalen Bildschirmen wie XS und SM werden die Kacheln dann untereinander dargestellt. Dies passt auch eigentlich soweit. Es wäre allerdings schön, wenn auch hier die "Text-Box" genauso hoch ist wie die "Bild-Box".
Siehe hier:
1610050551836.png

Gibt es eine Lösung für mein Problem? Oder habt ihr eine Idee wie man so ein Kachel-Design responsive-tauglich umsetzt?
Wenn ja, geht das überhaupt mit den voreingestellten Portlets?

Ich hoffe ihr konntet mir folgen und meine Fragen verstehen.

Vielen Dank schon jetzt für eure Hilfe!

Viele Grüße
Nadia
 

jürgenk

Mitglied
27. April 2020
62
4
Ich habe das Problem das nicht jedes Bild im Grid dargestellt wird. Gibt es irgendetwas zu beachten wie Pixel, Dateigröße, Format etc. ? Danke.
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
1.315
449
Hallo @Sonnenna

das ist leider immer so eine Sache, da der Text halt seinen Platz braucht, den kann man schlecht verkleinern ohne alles unlesbar zu machen, im Gegensatz zu Bildern. Klar kann man über verschiedene Browsergrößen gehen und hier und da etwas Rand wegnehmen oder doch eine Schriftart kleiner nehmen, aber das ist alles viel Arbeit und fehleranfällig..
Prinzipiell kann man sich sicherlich an den meist benutzten Browsergrößen orientieren und Text und Bild dafür passend machen.

Als Alternative ist es vielleicht für dich interessant den Text um das Bild "schweben" zu lassen?
https://www.w3schools.com/css/css_float.asp

Viele Grüße
Michael
 

Sonnenna

Aktives Mitglied
7. Januar 2021
40
4
Hallo Michael,

danke für deinen Tipp. Diesen werde ich auf jeden Fall mal ausprobieren.

Ein Bekannter hat mir nun zwischenzeitlich so geholfen, dass der Text / das Foto immer mittig zueinander angeordnet sind.
-> Class in custom.css definiert mit: .v-align-center .row {align-items: center;}
Die Class kann man dann ja im OPC bei Layout eingeben.

Wenn ich jetzt noch darauf achte, dass nicht zu viel Text verwendet wird, kommt es meinem Ziel schon sehr nahe:
1610397435971.png
1610397485939.png

1610397453903.png

Schönen Abend,
Nadia