Support » Allgemeine Fragen » Parallax auf IPad fehlerhaft

  • Hallo zusammen!

    Ich habe nach einigen Jahren meine Homepage mal wieder überarbeitet und habe nun das Problem, dass der eingebaute Parallax-Effekt auf dem IPad total beschissen aussieht.

    Ich habe mich schon dazu entschieden, jede Seite einmal für den Pc und die gleiche Seite noch einmal für Mobilgeräte (ohne Parallax und angepasst) zu erstellen.

    Das iPad greift auf die Desktop-Version zu. Auf der Startseite wird der Parallax-Effekt angezeigt (wenn auch noch unschön); auf der Seite „Preise“ wird der Effekt nicht angezeigt. Vielmehr ist auf der „Preise“-Seite viel zu sehr in das Bild hineingezoomt und es ist verpixelt. Auf der Desktop-Version funktioniert alles.

    Ich habe – soweit ich weiß – keine unterschiedlichen CSS-Codes auf den Seiten.

    Ich habe mich bereits im Netz etwas schlau gelesen und den folgenden CSS-Codes eingebunden (ohne Erfolg):

    @media (min-width: 768px) and (max-width: 1024px){
    .section-style.parallax_section{
    background-size: contain !important;
    -webkit-background-size: cover !important;
    background-position: center !important;
    background-attachment: inherit !important;
    }
    }

    Könnt ihr mir helfen?
    Danke & schöne Grüße!

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 1 Antwort (von insgesamt 1)
  • Auch hier wieder der Hinweis, dass wir hier keine Grundlagen zu CSS, HTML, PHP, FTP, JavaScript, REACT, Erster Hilfe, Seepferdchen usw. anbieten können, weil dies ein WordPress-Forum ist.

    Trotzdem zu dem geposteten CSS ein paar Hinweise:
    background-size: contain wird auf dem Mozilla Developer Network so beschrieben:

    Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.

    Quelle: MDN, background-size: Werte

    Die CSS-Regel sorgt also nur dafür, dass ein Hintergrundbild richtig skaliert wird. Vereinfacht gesagt wird hier der auf Mobilgeräten schlecht umsetzbare Parallax-Effekt durch die Anzeige eines bildschirmfüllenden Bildes ersetzt. Zum WordPress-Theme Astra gibt es einen guten Artikel in der Dokumentation, der darauf eingeht: Why Doesn’t Parallax Scrolling Work on Mobile?

    Der Zusatz !important ist als letztes Mittel zum Überschreiben von Inline-Styles gedacht und sollte sparsam verwendet werden. Meist lässt sich die Verwendung von !important durch eine geschickte(re) Auswahl von Selektoren vermeiden.

Ansicht von 1 Antwort (von insgesamt 1)