Lücke zwischen Header und Content verringern

wedwed
(@wedwed)

vor 3 Jahren, 8 Monaten

Hallo,

ich bin neu im Forum und recht neu in WordPress und erhoffe Hilfe – danke!
Meine Recherchen blieben bislang leider ohne Erfolg.

Ich habe auf meiner Startseite (siehe Link) eine Lücke zwischen Header und Content, die ich schließen möchte.
(In meinen Worten, sofern ich die falschen Fachausdrücke gewählt haben sollte:
Lücke zwischen Menüpunkten und transparent-schwarzem Kasten soll verringert werden -> weniger hoch)

Ebenso möchte ich die Lücke verringern, die innerhalb des transparent-schwarzen Kastens zwischen Bild und oberem Rand des Kastens vorhanden ist (in der Höhe verringern).

Ich danke und freue mich auf Rückmeldungen.

Gruß
wedwed

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 Jahren, 8 Monaten
Hallo,
teste mal unter Design > Customizer > Zusätzliches CSS:
```
content > .mid-content {
    margin-top: 0px;
}
```
evtl. noch zusätzlich:
```
article#post-428 {
    padding-top: 0px;
}
```
Viele Grüße,
Hans-Gerd
Thread-Starter wedwed
(@wedwed)

vor 3 Jahren, 8 Monaten
Danke dir!
Unter „Design > Customizer > Zusätzliches CSS“ finde ich eine linke Spalte mit folgendem Inhalt (siehe unten). Dort habe ich deine beiden Tipps als Punkt 3 sowie Punkt 4 eingetragen. Es hat sich nichts verändert. Hast du eine Idee, was ich falsch gemacht habe? Danke.

#main-slider .slick-dots li.slick-active button, .slider-caption .caption-description a:hover, .btn:hover, .testimonial-listing .slick-arrow:hover, .blog-list .blog-excerpt span, .woocommerce ul.products li.product .onsale, .woocommerce span.onsale, .woocommerce ul.products li.product .button, .parallax-section .wpcf7-form .wpcf7-submit, #go-top, .posted-on, .pagination .nav-links a, .pagination .nav-links span, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
background: #547fa9;
- Diese Antwort wurde geändert vor 3 Jahren, 8 Monaten von wedwed.
Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 8 Monaten
Da scheint eine geschwungene Klammer am Ende zu fehlen.
```
… .woocommerce input.button:hover {
background: #547fa9; }
```
Thread-Starter wedwed
(@wedwed)

vor 3 Jahren, 8 Monaten
Danke.
Hast du vielleicht noch eine Idee zur Lösung meines Problems? Würde mich freuen.
- Diese Antwort wurde geändert vor 3 Jahren, 8 Monaten von wedwed.
Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren, 8 Monaten

Hallo,

Dort habe ich deine beiden Tipps als Punkt 3 sowie Punkt 4 eingetragen.

Wenn du den Fehler, auf den Bego hingewiesen hat, korrigiert hast und die von mir genannten CSS-Regeln so übernimmst, sollte das funktionieren. Mir ist allerdings nicht klar, was du mit Punkt 3 und 4 meinst.
Viele Grüße,
Hans-Gerd
Thread-Starter wedwed
(@wedwed)

vor 3 Jahren, 8 Monaten
Herzlichen Dank. Das hat geklappt.
Innerhalb des transparent-schwarzen Feldes ist der freie Bereich nun minimiert.
(Sorry, dass ich die beiden Beiträge von Hans-Gerd und Bego Mario nicht als Kombination verstanden habe – jetzt ist es mir klar.)

FRAGE: – Derzeit ist der Eingriff nur auf der Startseite geschehen.
Habt ihr einen Tipp, wie man es global auf alle Seiten der Homepage übertragen kann?

FRAGE: – Habt ihr einen Tipp, wie ich den freien Bereich oberhalb des transparent-schwarzen Feldes global minimieren kann?

Ich danke euch!!!

__________________________________
Folgend nur zur Komplettierung der ganze und aktuelle CSS-Text:
```
#main-slider .slick-dots li.slick-active button, .slider-caption .caption-description a:hover, .btn:hover, .testimonial-listing .slick-arrow:hover, .blog-list .blog-excerpt span, .woocommerce ul.products li.product .onsale, .woocommerce span.onsale, .woocommerce ul.products li.product .button, .parallax-section .wpcf7-form .wpcf7-submit, #go-top, .posted-on, .pagination .nav-links a, .pagination .nav-links span, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background: #547fa9; }
content > .mid-content {margin-top: 0px;}
article#post-428 {padding-top: 0px;}
```
Moderatorenhinweis: Bitte Quellcode als ‘Code’ auszeichnen.
- Diese Antwort wurde geändert vor 3 Jahren, 8 Monaten von wedwed.
- Diese Antwort wurde geändert vor 3 Jahren, 8 Monaten von Hans-Gerd Gerhards.

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

Das Thema „Lücke zwischen Header und Content verringern“ ist für neue Antworten geschlossen.

Ansichten