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)