Kleines, optisches CSS-Problem

[thobie]

Moin, Moin, Kollegen,

kleines, optisches Schönheitsproblem auf der Website meines kleinen Buch-Onlineshops https://www.buch-schmie.de.

Ganz einfach und schnell erklärt: Die Startseite, die man auch wieder durch Klicken auf „BUCHSHOP“ in der Menüleiste erreicht, hat im Gegensatz zu allen (!) anderen Seiten unter der feinen, schwarzen/grauen Linie unterhalb des Menüs deutlich mehr (doppelt so viel?) freien, weißen Raum.

Auf allen anderen Seiten habe ich den Freiraum schon durch zusätzliches CSS um 30 px erhöht. Ich möchte aber gern den freien Raum nur auf der Seite „BUCHSHOP“ reduzieren (!).

Alle Versuche mit Zugriff auf content-area oder widget-area oder mit negativem margin-top-Wert schlägt fehl, denn dies wirkt sich dann auf alle Seiten aus. Anscheinend hat diese eine Haupt-Produktseite „BUCHSHOP“ eine eigene CSS?

Wie löse ich das?

 

[Difool]

Das ist das „margin-bottom“ der header-class auf der „home“-seite:
style.css : Zeile 31

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
  margin-bottom: 4.235801032em;
}

 

[thobie]

Schade, das ist es leider nicht.

In der style.css des Childthemes ist diese Zeile nicht vorhanden. Also habe ich die style.css zunächst probeweise im Parenttheme geändert. Zuerst habe ich den em-Wert auf 0 gesetzt. Keine Änderung. Dann habe ich die ganze von Dir als Code angegebene Zeile gelöscht. Keine Änderung.

Und ich hatte auch mit einem zusätzlichen CSS im Customizer des Themes keinen Erfolg, z.B. mit

.home.blog {
    margin-bottom 0px
}

u.a.m.

 

[Difool]

Schade, das ist es leider nicht.

In der style.css des Childthemes ist diese Zeile nicht vorhanden. Also habe ich die style.css zunächst probeweise im Parenttheme geändert. Zuerst habe ich den em-Wert auf 0 gesetzt. Keine Änderung. Dann habe ich die ganze von Dir als Code angegebene Zeile gelöscht. Keine Änderung.

Und ich hatte auch mit einem zusätzlichen CSS im Customizer des Themes keinen Erfolg, z.B. mit

.home.blog {
    margin-bottom 0px
}

u.a.m.

Es ist dieser Part.

Die css-Klassen werden mit einem Komma getrennt –
daher müsstest du schon die Klassen komplett schreiben.

.home.blog > bezieht sich auf body (…und spricht nur die Startseite des Blogbereichs an)
.site-header > bezieht sich auf den container (… und dort dann explizit diesen Container)

.home.blog .site-header {
    margin-bottom: 0;
}

 

[thobie]

Die css-Klassen werden mit einem Komma getrennt – daher müsstest du schon die Klassen komplett schreiben.

.home.blog .site-header {
    margin-bottom: 0;
}

Mit diesem Code funktioniert es leider auch nicht.

Aber da Du schreibst, ich müsse die Klassen komplett schreiben, funktioniert jetzt zumindest dieser Code:

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
  margin-bottom: 0;
}

Danke für die Hilfestellung. Problem gelöst.