Zur Navigation

Header lässt sich nicht weiter verkleinern.

1 Marco Wilbert

Hallo,

Ich würde gerne meinen Header (das Bild das über die gesamte Page geht) schmaler machen.

Im Customizer lässt sich dieser mit folgendem CSS Code zwar schmaler machen, das Problem ist allerdings das er dadurch nicht schmaler wie 30vh wird.
Ich hätte diesen aber gerne bei 15-20vh. Hab es auch schon mit max-height versucht aber leider funktioniert das auch nicht.

#static_header_banner.header-style-1{

min-height: 30vh;

}

Leider bin ich im CSS bereich noch Anfänger und finde keine Lösung.
Ich würde mich freuen wenn mir jemand weiterhelfen könnte.

Vielen Dank.

Gruß
Marco

www.garnelen-shop.eu

01.07.2022 14:52 | geändert: 01.07.2022 14:53

2 Jörg Kruse

Du hast an anderer Stelle eine feste Höhe für #static_header_banner definiert:

#static_header_banner {
    position: relative;
    z-index: 100;
    display: inline-block;
    height: 30vh;
    width: 100%;
    backface-visibility: hidden;
    text-align: center;
    background: rgb(0, 0, 0) none repeat scroll 0% 0%;
}

Diese wird nicht unterschritten, da min-height nur die Mindesthöhe angibt.

Du kannst für diesen Header die Höhenangabe überschreiben:

#static_header_banner.header-style-1 {
    height: 20vh;
}

01.07.2022 15:15 | geändert: 01.07.2022 15:16

1 Forenmitglied fand diesen Beitrag gut

3 Marco Wilbert

Hi,

danke für die Antwort..

Nur mit
#static_header_banner.header-style-1 {
height: 20vh;
}
geht es leider auch nicht...

Kann ich im Customizer einfach den ganzen Part reinhauen?

#static_header_banner {
position: relative;
z-index: 100;
display: inline-block;
height: 20vh;
width: 100%;
backface-visibility: hidden;
text-align: center;
background: rgb(0, 0, 0) none repeat scroll 0% 0%;
}

Danke

01.07.2022 16:01

4 Marco Wilbert

OK ich habs...

Hab einfach beiden im Customizer drin...

#static_header_banner {
position: relative;
z-index: 100;
display: inline-block;
height: 20vh;
width: 100%;
backface-visibility: hidden;
text-align: center;
background: rgb(0, 0, 0) none repeat scroll 0% 0%;
}

#static_header_banner.header-style-1{

min-height: 20vh;

}

Vielen Dank

01.07.2022 16:02

5 Marco Wilbert

Hätte noch eine letzte Frage...

Nun wirkt der Abstand zum Header etwas groß... Wie veringer ich diesen?

Lieben Dank

01.07.2022 16:14

6 Jörg Kruse

Die min-height Angabe ist jetzt überflüssig. Wenn die Höhe gleich 20vh, dann ist auch immer die Bedingung erfüllt, dass die Höhe mindestens 20vh beträgt.

Dass mein Code nicht funktionierte, lag vermutlich daran, dass du noch eine Mindesthöhe von 30vh drin hattest - die sollte natürlich ersetzt werden durch die Höhenangabe

Nun wirkt der Abstand zum Header etwas groß... Wie veringer ich diesen?

Das ist der obere Innenabstand von #content

#content.site-content {
    padding-top: 20px;
}

01.07.2022 16:20 | geändert: 01.07.2022 16:23

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]