Header Beschreibung wandert unter das Bild

Hallo,

das ist so gewollt, da auf mobilen Geräten das Header-Bild meist von der Höhe her sehr klein wird und der (umbrochene) Text dann nicht mehr in das Bild passt. Das kann also ohne tieferes Eingreifen nicht geändert werden.

Hallo,

Leider ist das so gewollt...

Ein gewollter Titel gehört trotzdem auf den Slider und auch in mobiler Ansicht nicht darunter! Das drunter schieben macht das ganze Layout nämlich zum visuellen Desaster. Die Kunden reissen mir deswegen fast den Kopf ab.

Ich kann den Titel/Text in der Grösse H1/H2/H3/Text doch selber bestimmen, damit dieser bei mobiler Ansicht immer auf den Slider passt. Und sonst lässt man den Titel oder zumindest den Text halt weg und schreibt gewollt unter den Slider einen neuen Artikel. Aber das sollte uns schon freiwillig überlassen werden.

Aber: Für eine automatische Titelgrössen-Anpassung im responsiven Design sollte in ZP so oder so folgendes (oder ähnliches) immer implementiert sein:

<style>

media screen and (max-width: 950px) {

h1 {

font-size: 7.5vmin; }

</style>

<style>

media screen and (max-width: 950px) {

h2 {

font-size: 6.5vmin; }

</style>

<style>

media screen and (max-width: 950px) {

h3 {

font-size: 5.5vmin; }

</style>

Wie Sie in den drei beigefügten Beispielen (dektop & mobile1) sehen, hätte ich mit den obigen kleinen Anpassungen kein Problem, einen Titel plus Subtitel inklusive Button - auf dem Sliderbild ohne Scrollbalken zu behalten. Wenn dem nicht so wäre, würde ich den Text in der Grösse von H1 auf H2 oder gar auf H3 anpassen oder wie oben bereits beschrieben - einen Teil einfach weglassen.

Aber eben... in der hochgestellten Mobile-Anicht (mobile2) wird der Titel/Subtitel/Button von ZP einfach aus dem Slider weg und automatisch daruntergestellt.

Hallo Webgrafie ,

vielen Dank für den Hinweis! Ich bin allerdings nicht sicher, dass ich das Ziel Ihrer Antwort verstehe. Was ist Ihr Ziel? Dass wir den von Ihnen hier erwähnten Code implementieren, der die Schriftgröße abhängig von der Bildschirmbreite kleiner macht (da wäre ich u.U. nicht einverstanden, weil die Bildschirmbreite nichts an meinen Dioptrien ändert)?

Ich bin auch nicht sicher, welches Layout Sie in den gezeigten Screenshots nutzen und kann das daher alles nicht so recht beurteilen?

Entschuldigen Sie bitte meine undeutliche Beschreibung. In den obigen Abbildungen verwende ich das Layout "Top Responsive", weil ich in den meisten Fällen über dem Hauptmenü eh ein Extramenü (inklusive Buttons) brauche.

Innerhalb dieses Layoute ist es leider so, dass die Slider-Überschrift und der Slidertext bei der mobilen Ansicht automatisch unter den Slider wandert.

Die Antwort von Steffen T. auf die Anfrage von unten stehendem Zitat war ja...: das ist so gewollt, da auf mobilen Geräten das Header-Bild meist von der Höhe her sehr klein wird und der (umbrochene) Text dann nicht mehr in das Bild passt. Das kann also ohne tieferes Eingreifen nicht geändert werden.

Zitat von SchlossBueckeburg

Liebe Community,

ich verwende das "Top Responsive" Design und habe als Header einen Slider mit Beschreibung eingefügt.

Wenn ich nun die Mobile Version anschaue wandert der Beschreibungstext immer unter das Bild.
Wie kann ich es einstellen, dass der Text im Bild bleibt und nicht darunter wandert??

Ich freue mich auf eure Rückmeldung!

Ich will die Antwort von Steffen T. nicht verstehen, weil ich sehe, dass mit allen mobilen Displaygrössen die mir zur Verfügung stehen, die Slider-Überschrift - inklusive Text und Button - ohne weiteres auch in der Mobilenansicht auf dem Sliderbild - ohne Scrollbalken - Platz hat (siehe meine obigen Bildbeispiele). Die Sliderüberschrift gehört nun mal auf das entsprechende Bild und nicht darunter und das selbstverständlich auch in der mobilen Ansicht (im "Carousel"-Widget funktionierts ja auch).

Und wenn der Text doch zu groß dafür wäre, binde ich stehts den obigen Code per CSS ein, damit die großen Titel wie H1, H2, H3 usw., an alle (kleinen) Display's per Viewport automatisch angepasst werden.

Aber es ist doch so, dass nicht alle User CSS-Kenntnisse besitzen, um einen Code selbstständig einzubinden. Darum sollte in ZP eine Überschriftgrössen-Anpassung fest integriert sein, damit bei jeder Displaybreite alle Überschriften automatisch mit verkleinert werden.

________________

Ein hierfür weiterer Vorschlag: Damit auf mobilen Geräten das Header-Bild in der Höhe nicht kleiner wird...

ZP könnte in Zukunft im LayoutDesigner auch "Full Screen" anbieten. Die Höhe des BildScreens könnte vom User eingegeben werden. In der mobilen Ansicht würde das Bild oder Slider immer gleich hoch bleiben, der Fokus bleibt dabei stets zentriert. Aber die Überschriften inklusive Texte hätten somit stets Platz und werden niemals so unschön aus dem Slider/Bild heraus nach unten verschoben.

Hier ein online Beispiel: https://www.schweizerhof-luzern.ch/de/hotel-schweizerhof-luzern/

Schieben Sie mit der Maus das Browserfenster in der horizontalen von links nach rechts.... die Bildhöhe bleibt konstant und die Überschriften werden automatisch verkleinert.

Händisch ist das ohne weiteres machbar, aber eben, nicht jeder ZP-User hat CSS-Kenntnisse.

Hallo,

danke für die ausführliche Beschreibung.

Mit etwas eigenem CSS sollte das Ihren Vorstellungen entsprechend umsetzbar sein. Bitte dazu mal folgende Seite lesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

Folgender Code sollte dann funktionieren:

<style>
@media only screen and (max-width: 768px) {
    #header .flex-caption {
        margin-top: 0;
        position: absolute;
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
}
</style>

Ja, für ein Header-Widget mit Slidefunktion passt Ihr Code perfekt, Danke! (Ich hätte ja nichts gegen das Header-Widget, dieses ist aber in "Top Responsive" nicht randlos.)

Darum thematisieren wir hier das "Slider-Widget", dass als Header dienen soll.

Besten Dank!

Das ist perfekt.

Bei mir fehlte (.burns)

Hallo Steffen T.,
können Sie den Code für den HEADER so ändern oder ergänzen, dass ab 368 px die Beschreibung gar nicht mehr anzeigt wird (weder im Header noch darunter)?
Besten Dank und lG
Sunny

Evtl. so

<style>
@media (max-width: 368px) {
    .flex-caption {
        display: none;
    }
}
</style>

Danke, funktioniert leider nicht.
Habe einiges gestestet. Jetzt mach ich's manuell mit Header ausblenden und Grafik einblenden ab einer bestimmten Bildschirmbreite. Sind nicht viele Rubriken und geht deshalb schneller.

Ich wünsche mir, dass man künftig individuell entscheiden kann, ob der Header-Text ab einer bestimmten "Schmäle" unter dem Header erscheinen oder ausgeblendet werden soll.

LG
Sunny