Slider in mobiler Ansicht mit schwarzem Balken

Torsten_O

Hallo an Euch,

habe nun meine erste Zeta-Seite fertiggestellt unter https://www.deitenbach.de

Ich verwende das Layout: Producer Responsive, Projektvorlage: Swiss Responsive - Clean, Variante: 01-light-angepasst.

Auf der Startseite habe ich oben einen Slider aus 11 Fotos mit Text eingesetzt. In der Desktop-Version ist alles gut. Aber in der mobilen Ansicht habe ich dort stets zwischen Foto und Text einen sehr hohen, schwarzen Balken, übrigens auch beim Querformat. Ich habe daraufhin mal alle Fotos auf die gleiche Größe gebracht, Größenverhältnis ca. 4:1, was aber leider nichts verändert hat. Habe auch mehrfach komplett neu erstellt und komplett veröffentlicht.

Es funktioniert zwar, aber ist halt recht unschön. Vielleicht hat jemand eine Idee ...?!?

Dieses Verhalten zeigt sich übrigens nur auf der Startseite. Auf anderen Seiten mit Slider klappt es auch mobil so wie es soll.

Beste Grüße einstweilen und vielen Dank vorab,

Torsten

Steffen T.

Hallo,

auf der Startseite sind die Bilder noch zusätzlich verlinkt. Das scheint die Fehldarstellung zu verursachen. Das müssen wir vermutlich korrigieren. Melden uns dann nochmals.

Stefan S

Hallo,

ist behoben und Online-Update für 14.1 ist raus. Bitte in frühestens 30 Minuten mal auf "Extras > Updates suchen" klicken um das Online-Update zu laden. Danach ggf. die Tastenkombination STRG-SHIFT-T drücken.

Torsten_O

Hallo Stefan und besten Dank für die schnelle Unterstützung!

Ich habe das Update drin und alle Inhalte neu erstellt und veröffentlicht. Leider ohne Veränderung auf meiner Seite (Mobil).

In der Tat liegt es an der internen Verlinkung der Slider-Bilder. Habe die mal alle komplett herausgenommen und der schwarze Zwischenraum war gleich weg. Sobald ich die Links wieder setzte, ist der Balken wieder da.

Wobei ich sagen muss, dass die Skalierung der Fotos so mir erheblich besser gefällt, da hierdurch das ganze Bild zu sehen ist. Sonst (ohne Balken) ist nur mehr ein Ausschnitt im mittigen Bereich zu sehen. Optimal wäre für die mobile Ansicht des Sliders eigentlich die komplette Fotodarstellung (niedrig und breit) und ohne Balken. Aber vielleicht kann man ja nicht alles haben ...

Freundliche Grüße

Torsten

Stefan S

~~Hallo,~~

das ist eigenartig. In Ihrem Projekt scheint in den Layout-Einstellungen für "Kopfgrafik > Bild > Darstellung" der Wert "skalierend" gewählt zu sein, die nötigen CSS-Regeln fehlen aber im generierten file.

~~Um festzustellen, was da los ist, sollten Sie mir Ihr Projekt senden:~~

~~Öffnen Sie Ihr Projekt in Zeta Producer~~
~~Gehen Sie auf das Menü "Extras"~~
~~Klicken Sie auf den Button "Optionen"~~
~~Klicken Sie auf "Aktionen"~~
~~Klicken Sie rechts auf die Aktion "Projekt Senden" damit diese Markiert ist~~
~~Klicken Sie unten auf den Button "Ausführen"~~
~~Geben Sie im 1. Feld Ihre E-Mail-Adresse ein, damit wir Sie für Rückfragen kontaktieren können~~
~~Geben Sie als Referenz ins Feld Bemerkungen den Link zu diesem Forum-Artikel ein (per Kopieren und Einfügen)~~
~~Klicken Sie auf den Button "Senden"~~

Stefan S

Hallo,

das Projekt zu senden ist nicht mehr notwendig, Ich habe den Fehler gefunden. Sie nutzen gar nicht die Einstellung "skalierend", das scheint nur so, wenn die Bilder verlinkt sind…

Stefan S

Online-Update ist raus. In frühestens 30 Minuten auf "Extras > Updates suchen" klicken, um das Online-Update zu laden. Danach ggf. die Tastenkombination STRG-SHIFT-T drücken.

Torsten_O

Prima, vielen Dank!

In der Tat hatte ich die Einstellung auf 'zentriert' bisher ... kannte diese Möglichkeit der Einstellung noch gar nicht

Die Bilder werden nun auch mobil wunderbar skaliert, allerdings nun (nur mobil) nahezu komplett von der Bildunterschrift überlagert (H1 zentriert) ... Im Bilderalbum kann man ja wählen, ob der Text auf oder unter dem Foto erscheinen soll. Geht das im Slider auch ...?

Freundliche Grüße

Torsten

Stefan S

Nein, das geht im Slider nicht. Lassen Sie die Einstellung doch einfach auf "zentriert", dann sind die Header höher und es sieht dann nicht so schlimm aus.

madas

Zitat von Torsten_O

allerdings nun (nur mobil) nahezu komplett von der Bildunterschrift überlagert (H1 zentriert)

Beim Attribute "additional_css" folgendes einfügen, dann sieht es etwas besser aus:

Code

<style>
@media only screen and (max-width: 1599px) {
    div.flex-caption {
        left: 0;
        width: 90%;
        padding: 10px 5% 30px 5%;
    }
}
    
@media only screen and (max-width: 768px) {
    div.flex-caption {
        padding: 5px 5% 25px 5%;
    }

    div.flex-caption H1 {
        font-size: 0.75em;
    }
}
</style>

Alles anzeigen

Torsten_O

Vielen Dank Stefan und Madas, wirklich eine tolle Hilfe hier von Euch.

Ich habe zusätzlich noch die Höhe der Überschriften im Slider etwas verringert, damit kann ich nun gut leben.

Besteht eigentlich eine Möglichkeit, die Höhe des Schattens der Slider-Überschriften manuell zu verkleinern?

Freundliche Grüße

Torsten

Slider in mobiler Ansicht mit schwarzem Balken

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?