Hallo,
da müssen Sie etwas eigenes CSS einsetzen.
Bitte dazu mal folgende Seite lesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html
Folgender Code könnte dann funktionieren (ungetestet)
<style>
#slider .flex-caption {
width: 100%;
top: auto;
bottom: 0;
transform: translate(-50%,0%);
}
</style>Einstellungen > CSS:
<style>
#slider .flex-caption {
width: 100%;
top: auto;
bottom: 0;
-webkit-transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
transform: translate(-50%,0%);
}
</style>eine Frage habe ich noch, es ist schon was länger her, wie finde ich heraus wie der einzelne Container heisst, jetzt wie in diesem Fall
#slider .flext-caption
und zur Erläuterung bitte, was bedeuten die Werte -050%, 0%
Danke für Eure Zeit
eine Frage habe ich noch, es ist schon was länger her, wie finde ich heraus wie der einzelne Container heisst, jetzt wie in diesem Fall
#slider .flext-caption
Das benötigst du in dem Fall nicht. Einfach wie oben beschrieben unter Einstellungen > CSS einfügen. #slider .flex-caption ist die CSS-Klasse für das Textfeld in der Header-Grafik.
und zur Erläuterung bitte, was bedeuten die Werte -050%, 0%
Im Original wird der Text mit position:absolute; left:50%; top:50%; zentriert. Damit würde der Text aber in der Mitte beginnen und nach rechts und unten auslaufen. Mit transform: translate(-50%,-50%); wird dieser dann um jeweils 50% nach oben und links verschoben. Somit wird dieser dann mittig dargestellt.
Die Änderungen:
top: auto;: Hebt die Angabe top:50%; auf.
bottom: 0;: Verschiebt nach ganz unten.
transform: translate(-50%,0%);: Verschiebt den Text um 50% nach links damit er mittig platziert wird. Der Versatz nach oben wird mit 0% aufgehoben weil Text mit bottom: 0; bereits unten bündig dargestellt wird.
dankeschön
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!