Gutenberg – Abstand zwischen Überschriften entfernen

  • Gelöst uashdo

    (@uashdo)


    vor 3 Monaten, 3 Wochen

    Liebe Community

    Leider finde ich keine Lösung zu einer mM nach einfachen Frage. Ich möchte zwei Überschiften sehr nahe übereinander platzieren. Siehe Screenshot unten:

    Die „.add-remove-space“ habe ich im Customizer definiert als „.add-remove-space {
    margin-bottom: 0; margin-top; 0;}“. Sowohl die obere als auch die untere Überschrift sind entsprechend definiert. Das hab ich als Tipp ergoogelt, aber es funktioniert nicht.

    Habt Ihr Tipps?

    Vielen lieben Dank für die Unterstützung!

    Herzliche Grüsse, Uashdo

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Monaten, 3 Wochen

    Hallo,
    leider habe ich die entsprechende Stelle auf der Seite nicht gefunden. Aber das sollte wie folgt funktionieren:
    Gruppiere jeweils die Überschriften und setze dann sowohl Innenabstand als auch Außenabstand auf kleine Werte.

    Viele Grüße
    Hans-Gerd

    Moderator Angelika Reisiger

    (@la-geek)

    vor 3 Monaten, 3 Wochen

    Wenn ich das auf dem Screenshot richtig sehe, hast du die CSS-Klasse mit einem Punkt davor eingetragen =
    .add-remove-space
    Das wird dort ohne Punkt eingetragen =
    add-remove-space

    Im Customizer hingegen ist es korrekt und auch erforderlich, innerhalb des CSS-Codes für eine CSS-Klasse den Punkt zu verwenden =
    .add-remove-space

    Dein CSS-Code

    .add-remove-space {
    margin-bottom: 0;
    margin-top: 0;
}

    bedeutet dass der Außenabstand oben (-top) und unten (-bottom) auf 0 gesetzt wird. Es ist fraglich, ob du den Abstand wirklich nach oben UND nach unten entfernen musst. Viele Elemente können außerdem auch noch einen Innenabstand haben:

    .add-remove-space {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}

    Sollte das so nicht funktionieren, dann poste einfach einmal die Seite, wo das Problem auftaucht. Andere CSS-Regeln mit höherer Gewichtung könnten deine individuelle CSS-Regel überschreiben.

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Monaten, 3 Wochen

    Nur ergänzend:
    Da du ein klassisches Theme (Sydney) verwendest, kommt leider mein Lösungsvorschlag nicht in Frage.
    Selbst wenn man über die functions.php die Appearance Tools mittels
    add_theme_support( 'appearance-tools' );
    aktiviert, stehen nicht so viele Möglichkeiten wie bei einem Block Theme zur Verfügung.

    Insofern bleibt tatsächlich nur die Option per CSS wie Angelika das beschrieben hat.

    Thread-Starter uashdo

    (@uashdo)

    vor 3 Monaten, 3 Wochen

    Vielen herzlichen Dank Hans-Gerd und Angelika!
    Hab das ausprobiert, aber … es muss ein höher gewichtete CSS Regel irgendwo sein, wie Du schreibst, Angelika.
    Hab die Seite nun veröffentlicht. Hier: https://www.beisichsein.ch/bei-sich-sein-neu/
    Die grünen Überschriften (H4) sollen jeweils nur wenig Abstand zu den Hauptüberschriften (H2) haben.
    Danke für Eure Unterstützung – ich bin super froh!
    Herzliche Grüsse, Uashdo

    Moderator threadi

    (@threadi)

    vor 3 Monaten, 3 Wochen

    Probiers mit diesem individuellem CSS:

    body #main .entry-content h4 + h2 {
      margin-top: 0;
    }

    Das musst Du unter Design > Customizer > Zusätzliches CSS einfügen.

    Thread-Starter uashdo

    (@uashdo)

    vor 3 Monaten, 3 Wochen

    Hi Threadi
    Vielen lieben Dank – das hat geklappt (allerdings nur mit Padding auch auf 0 setzen)!
    Jetzt kann ich damit spielen 🙂
    Problem gelöst!
    Herzlichen Dank für Euren Support!

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)

Schlagwörter