Flat Responsive - Kopfgrafik wird auf schmalen Bildschirmen beschnitten

Hallo,

kann ich jetzt nicht wirklich nachvollziehen. Inwiefern sind die Bilder denn nicht responsive?

Dann posten Sie hier doch mal die Web-Adresse, wo wir das sehen und nachvollziehen können.

Hallo,

dann bitte einfach in eine Testumgebung veröffentlichen.

Ich vermute, es geht hier nicht um einen Fehler, sondern um die standardmäßig vorhandene seitliche Beschneidung, wenn die Bilder sonst zu klein würden.

In diesem Layout ist es so, dass ab einer bestimmten Bildschirmbreite (640px) die Headerbilder nicht mehr verkleinert werden, sondern im Viewport zentriert dargestellt werden, damit die Bilder nicht zu klein werden und ggf. der Text des Headers auch noch reinpasst. Wenn das nicht gefällt, könnten Sie statt des Headers ggf. das Slider-Widget nutzen oder auf ein anderes Layout wechseln.

Alternativ beeinflusst das folgende CSS das Verhalten in Flat-Responsive so, wie Sie es gerne möchten.

• Klicken Sie im Menü Website auf "Einstellungen"
• Klicken Sie auf CSS
• Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"

<style>
@media screen and (max-width:640px) {
    .objectfit #slider .flex-container {
        padding-bottom: 0 !important;
        height: auto !important;
    }

    .objectfit #slider .slides > li img {
        width: 100%;
        height: auto;
        object-fit: fill;
    }
}
</style>

Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

ich habe es so gelöst wie beschrieben, jedoch sieht es in der Mobilansicht so aus: siehe Screenshot.
Der Bereich bis dorthin, wo das Bild normalerweise aufhören würde bleibt leer, auch die Punkte (Visualisierung) sind weiter unten.

Gibt es hierfür noch eine Lösung?

Hallo Christian_88

Ich habe die Vermutung, dass Du noch den Browser-Cache löschen müsstest.

Ansonsten wäre es gut, hier einen Link auf Deine Seite zu haben, damit man sich dies anschauen könnte.

Viel Erfolg und viele Grüsse

elch (mobil, nach Bergwanderung )

browser-cache löschen hat nichts gebracht

habe bei einem Freund Rat gesucht, der hat mir folgende Ergänzung im CSS gemacht, jetzt funktioniert es wie es soll:

(die Visualisierung wurde mit dem letzten Befehl deaktiviert, da diese in der mobilen Ansicht überproportional groß aussieht)

<style>
@media screen and (max-width:640px) {
.objectfit #slider .flex-container {
padding-bottom: 0 !important;
height: auto !important;
}


.objectfit #slider .slides > li img {
width: 100%;
height: auto;
object-fit: fill;
}


.objectfit #slider .slides>li {
min-height: 0;
}
#slider .flex-control-paging li a {
!width: 0px;
!height: 0px;
visibility: hidden;
}




}


</style>