Support » Allgemeine Fragen » Foto auf mobiler Version verpixelt

  • antoniavonarx

    (@antoniavonarx)


    Hallo zusammen

    Ich bin kompletter Webseiten- und WP-Neuling und bin grad am erstellen einer allersten Webseite.
    Auf der Homeseite hab ich ein Foto im Querformat, welches in der Desktop-Version gut angezeigt wird, in der mobilen Version allerdings sehr verpixelt wird.
    Kann mir jemand sagen, ob ich das irgendwie beheben kann? (Coding-Kenntnisse leider noch nicht wirklich brauchbar, ich arbeite momentan einfach mit dem eingerichteten Block-Editor.)
    Danke schon mal im Voraus!

    Antonia

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

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Hallo Antonia,

    danke für deine Geduld! 🙂
    Ich habe dein Problem leider nur bedingt nachstellen können.
    In der Entwicklungsumgebung wird das Bild bei mir bei jeder Screen-Größe scharf dargestellt. Wenn man das Bild bzw. die Seite mit einem Apple-Gerät aufruft ist es ebenfalls scharf, verpixelt wird es nur bei Android-Geräten angezeigt.

    Das ist höchst wahrscheinlich recht einfach mittels CSS zu beheben. Den richtigen CSS Code zu schreiben ist aber wesentlich einfacher, wenn das Problem in der Entwicklungsumgebung nachzustellen wäre.

    Da das aber – zumindest bei mir – nicht möglich ist, müsste man den CSS Code direkt auf deiner Seite so lange bearbeiten, bis das Bild auch auf Android-Geräten unverpixelt zu sehen ist.

    Also entweder hat hier jemand die Lösung direkt parat oder ich müsste die Möglichkeit bekommen, auf den CSS Code zuzugreifen.
    Sonst fällt mir leider keine Alternative ein…

    Ich hoffe damit konnte ich zumindest schon ein wenig Licht ins Dunkel bringen.

    Viele Grüße

    David

    Hallo @dsiemers,

    ich gehe davon aus, dass es sicher von dir nur gemeint war und dein Engagement hier im Forum ist auch jederzeit gerne gesehen und willkommen.

    Dennoch muss ich auf folgendes hinweisen:

    oder ich müsste die Möglichkeit bekommen, auf den CSS Code zuzugreifen.

    Bitte sieh künftig von solchen „Angeboten“ ab, siehe auch die Forenguidelines

    Do not post, offer, or ask for login information, even test IDs and test passwords.

    Hallo Angelika,

    Danke für deinen Post.
    Natürlich war meine Nachricht nicht negativ gemeint. Ich weiß auch, dass es nicht erwünscht ist, nach Login-Daten zu fragen.

    Meine Nachricht sollte eher so verstanden werden, dass es schwer ist, den passenden CSS Code bereitzustellen, wenn das Problem in einer Entwicklungsumgebung nicht nachzustellen ist. Es müsste also tatsächlich „live“ am CSS geschraubt werden, um das Problem auf einem nativen Android-Gerät zu lösen.

    Ich hoffe, jetzt kam meine Intention richtig an!

    Viele Grüße

    David

    Ja, so hatte ich es auch deinerseits verstanden oder besser gesagt „vermutet“ gehabt. Es ging nur darum, mögliche potentielle Missverständnisse aus dem Weg zu räumen 🙂

    @dsiemers

    Hallo David,

    das lässt sich aber auch im Chrome -> Dev-Tools darstellen, über „Toggle Device Toolbar“, z. B. über die Auswahl „Moto G4“ (verpixelt) und „iPhone X“ (scharf).

    @antoniavonarx

    teste das doch einmal aus, trage den nachfolgenden CSS-Code unter Design -> Customizer -> Zusätzliches CSS ein

    @media screen and (max-width: 480px) {
        .home img.wp-block-cover__image-background.wp-image-202 {
           max-width: none;
           width: fit-content;
           margin: 0 auto 0 -140%;
        }
    }

    Hallo,

    @la-geek
    Ich kann das Problem selbst mit deinen genannten Einstellungen nicht nachstellen… Bei mir wird das Bild selbst mit dem Moto G4 scharf angezeigt. Ich hoffe einfach dein Code funktioniert! 🙂

    @antoniavonarx
    Berichte dann gerne Mal, ob es funktioniert hat!

    Viele Grüße

    David

    @dsiemers

    Ich befürchte, der Code wird nicht funktionieren, aber einen Versuch ist es wert.

    Eventuell ist es auch ein Cache-Problem im Kontext mit Lazy Loading, sobald ich die Website neu lade, ist das Bild schärfer (aber nur am Desktop, im Android nicht <- dort reagiert das Löschen des Caches aber auch anders).

    Mir scheint auch, dass (abgesehen von einem etwaigen Lazy-Problem) einige min-height Angaben zu viel im (Headerbild) umgebenden Block sind?

    min-height: 430px;
    min-height: 493px;
    in .wp-block-cover, .wp-block-cover-image

    Wenn man diese Höhen (unter einem bestimmten Viewport) abstellt, schauts besser aus:

    Würde man dann auch noch dem Headerbild die Mindesthöhe (100%) wegnehmen, schauts so aus:

    (Wobei da sollte man dann auch diesen komischen „wp-spacer“ Block wegtun)

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)