Im Bloglayout den Abstand zwischen Titel und Einleitungsatz verringern

    Joomla Version
    5.2.2
    PHP Version
    PHP 8.3.x
    Hoster
    ionos

    In der Blogansicht ist der Abstand zwischen dem (Beitrags-) Titel und dem Einleitungssatz ziemlich groß. Ich suche nach einer Lösung dafür, den Abstand zu verringern.

    Siehe vorübergehend: https://viarete.de/test-1-kategorieblog/test-1-a-k

    Meine bisherige Lösung , eine Systemklasse in der user.css zu überschreiben, ist wenig befriedigend, da sie bei größerer "Reduzierung" von margin zu Überschneidungen führt, wenn die Titel ohne Einleitungssatz untereinander stehen. Auch wird der Einleitungssatz nur unerheblich nach oben verschoben.

    .com-content-category-blog__item.blog-item {
    margin: 0 0 -18px 0;
    border: solid 1px magenta; /* Nur zur Markierung */
    }

    Bedauerlicherweise geht es nicht so einfach wie beim Abstand zwischen (Kategorie-) Titel und (Kategorie-) Beschreibung, wo es annähernd funktioniert, weil dort die Beschreibung eine eigene Klasse hat.

    .com-content-category-blog__description.category-desc {
    margin: 0px 0px -14px 0px;
    border: solid 1px green; /* Nur zur Markierung */
    }

    Frage: Hat jemand eine bessere Lösung für die Reduzierung des Abstandes zwischen (Beitrags-) Titel und Einleitungssatz?

    *

    Die CSS, die du nutzt reduziert den Abstand zwischen zwei Beiträgen, nicht zwischen Titel und Introtext.... und negative margin-Werte werden immer zu einer Überschneidung führen

    Wenn du den Abstand zwischen Beiträgen (blog items) ändern willst, musst du den gap-Wert ändern, da das Bloglayout als grid definiert ist:

    Code
    .blog-items {
    grid-gap: .5em;
}

    Für den Abstand zwischen h2 und Introtext hat chr-hl schon die Lösung gepostet

    Danke an Christian und Viviana! | Das Problem ist gelöst.

    Christian! Ich habe nebenbei noch dazu gelernt, wie ich die Darstellung des Einleitungssatzes beeinflussen kann.

    user.css

    /* --- Blog - Einleitungssatz --- */
    .com-content-category-blog__item.blog-item p {
    margin-bottom: 6px ;
    /* border: solid 1px red; */ /* Zur Kontrolle, ob eine Änderung angekommen ist.
    Einfach ändern bei der nächsten Änderung */
    }