Probleme beim Umbruch / Text überlappt

    Joomla Version
    4.3.4
    PHP Version
    PHP 8.2.x
    Hoster
    kasserver.com
    Link (URL) zur Seite mit dem Problem
    https://lalita.pinguin47.de/yoga/yoga-anfaengerkurs

    auf der Seite sieht man 2 "Kurse" (unten die 2 Kästen).

    Es mehre Zeilen Text, wenn die Seite z.b. "klein geschoben" oder auf einem Mobil-Gerät geöffnet wird.

    s. Screenshot vom Handy, da ist es im unteren Bereich schön zu sehen. nach dem "oder" das "Workshop" überpallt nicht und ist gut lesbar.

    Der Text, der automatisch umgebrochen wird, überlappt für die Teile oben. Auch die Überschrift "Knoten mim Bein" soltle weiter vom Bild weg gerückt werden,
    Es wird aber alles zusammen deiniert mit einem

    benutzer definierten CSS in den Einstellungen von ICagenda eingestellt: Damit - so meine ich - sind für alle Bereiche die selben Werte gesetzt un sie müsstne sich gleich verhalten.


    Code
    .ic-block, .ic-eventlist-desc, .ic-dateteime-div, .iceventlist-venue, .iceventlist-title {
padding: 0.5rem;
margin: 10px;
dy:1.5em;
}



    Wo liegt mein Fehler?

    habe ich mal versucht, es zuckt auch ein wenig beim "reload", aber es ändert sich nicht.

    Das Problem, das für den Block ".iceventlist-desc" es nicht überlappt, wenn umgebrochen wird, für die anderen Blöcke doch, geht über meinen Erfahrungshorizont.

    Ich versuche halt über die Chrom die Seite zu untersuchen, die Container zu identifizieren und dann im custom-css anzupassen.

    Zitat von maxem

    Ich versuche halt über die Chrom die Seite zu untersuchen, die Container zu identifizieren und dann im custom-css anzupassen.

    wenn, dann in die user.css.


    Was man auch probieren könnte:

    iCagenda > Optionen > Einstellungen > Anpassung > Lade angepasste CSS: Ja

    Angepasster CSS Code ....


    Liebe Grüße

    Christine

    Zitat von christine2

    Was man auch probieren könnte:

    iCagenda > Optionen > Einstellungen > Anpassung > Lade angepasste CSS: Ja

    Angepasster CSS Code ....

    Ja, genau dort passe ich den CSS an. Nicht in einer USer.css. Ich habe auch mal den kompletten Code von dort in eine User.CSS verschoben, der hat dann aber keinerlei Auswirkung! Wieso das?! (aber offtopic)

    Was ich aber gemerkt habe, wenn der Code ohne Anpassung der Schrift erfolgt, dann wird beim Umbrechen der Zeilen der Text nicht überlappt. Es ist aber dann zu klein und passt nicht zur restlichen Seite.

    Füge diesen Code in deiner user.css


    Zitat von maxem

    Es mehre Zeilen Text, wenn die Seite z.b. "klein geschoben" oder auf einem Mobil-Gerät geöffnet wird.

    Ist leider nicht genügend CurlY BracketS , schaue mal auf Mobile. Dazu kommt noch, dass die «icrounded_style.css» bei einem iCagenda Update überschrieben wird.


    Die Code Angabe im #7 funktioniert bei mir, und wird in der user.css auch nicht mehr überschrieben.

    ich habe nun nicht alle Elemente zusammen gefasst, sondern genau so, wie sie im org. CSS-template dargestellt sind in die "Generellen Einstellungen" -> Angepaster CSS-Code rein gepackt. Dort dann jedem die gewüünschten Werte verpasst.

    Was ich noch gerne hätte, was so auch nicht richtig funktioniert:

    In der mobilen Ansicht eine kleinere Font-Size (1.0rem) und in der "normalen" Browser-Sicht eine größere Font-Size (1.4rem, wie aktuell eingestellt).


    Wenn ich da nun mit einem Media-query mache, wo platziere ich diesen dann?

    ich hab e jetzt so was wie:

    Code
    .xxx .yyy {
font-size:1.4em
}
.xxx2 .ddd {
font-size:1.4em
}

    wo platziere ich denn das

    "@media (min-width.xxx)"

    um die verschiedenen Fonts für die diversen Anzeige-Größen zu realisieren?