Abstand Logo und Slogan im Header bei Smartphone-Ansicht

Hallo Kristin,

welche Version von Zeta Producer wird verwendet?

Gruß Michael

Kannst du bitte mal einen Screen senden?

Hallo Kristin,

mit dem folgenden CSS meine ich es, hinbekommen zu haben. Vielleicht hat aber jemand auch noch eine bessere Idee.

Einzutragen wäre das unter „Einstellungen > Website > Einstellungen > CSS“. Mit den Werten für den Viewport (560px) und fürs Padding oben und unten musst Du natürlich noch ein wenig experimentieren.

<style>
@media screen and (max-width: 560px) {
    #header>.topline {
    padding-top: 120px !important;
    padding-bottom: 10px !important;
}
}
</style>

Viele Grüße

Tom

Hallo Kristin,

mit der Linie stoße ich gerade an die Grenzen meines gefährlichen CSS-Halbwissens und muss somit passen.

Meinem Verständnis nach ist das ja auch keine „Linie“ sondern ein „oberer Rahmen“ (border-top), und dessen minimale Breite wird natürlich zunächst durch die Breite des Elements bestimmt, den er umschließt.

Natürlich kann man die Breite des Elements (hier der Slogan) und somit dann auch die Breite des Rahmens mittels „width“ verringern, dann wird der Text aber zwangsläufig zwei- oder dreizeilig.

Vielleicht liege ich aber auch völlig falsch, und es gibt eine ganz einfache Lösung. Dazu müssen sich dann aber mal die CSS-Cracks dieses Forums äußern.

Viele Grüße

Tom

Hallo,

wie Drcymbalschon erkannt hat, ist das nicht ganz einfach zu erreichen. Das lässt sich nur über einen kleinen Umweg lösen, in dem man die normale Border ausblendet und dann eine neue mit variabler Breit erzeugt.

Der folgende zusätzliche Code ändert die Breite in der Tablet- und Smartphone-Ansicht:

<style>
@media screen and (max-width: 768px) {
    #header #slogan {
        border-top: none; /* normale Linie ausblenden */
    }
    
    #header #slogan::before {
    	content: "";
    	display: block;
    	margin: 0 auto;
    	top: -0.35em;
    	border-top: 1px solid #d4d4d4;
    	
    	width: 270px; /* <- hier die gewünschte Breite eintragen */
    }
}
</style>

Ggf. ist auch eine Angabe wie width: 80% anstatt einer festen Breite in Pixeln sinnvoll.