Hallo,
das Bild wird auf dem Monitor falsch dargestellt, aber andere Seiten werden richtig dargestellt. Leider finde ich den fehler nicht. Mobil und Laptop sehen gut aus.
meine Seite:
andere SEite:
Topic summary
Banner-Bild auf Desktop/Monitor wird seitlich abgeschnitten, während Mobil- und Laptop-Ansicht korrekt sind. Betroffene Seite: pinarcosmetics-shop.de; auf breiteren Monitoren tritt das gleiche Problem auf.
Analyse/Update: Nach Nachforderung eines Testlinks stellt sich heraus, dass das Banner sich ab ca. 750 px Bildschirmbreite nicht anpasst und dadurch zu breit ist; die Ränder werden abgeschnitten. Ursache ist das ungeeignete Seitenverhältnis des aktuellen (alten) Bannerbilds.
Vorgeschlagene Lösungen:
- Bild in einem Editor auf ein geeignetes, responsives Seitenverhältnis (z. B. 16:9) zuschneiden/neudimensionieren.
- Alternativ (theme-abhängig, ohne Gewähr): per CSS-Media-Query für Viewports ≥749 px die Höhe des Hero-Bereichs setzen, z. B.: #shopify-section-hero .hero–large { height: 140px; }. Anpassung der Pixelwerte je nach Bedarf; Implementierung durch Expert:in und in Testumgebung empfohlen.
Hinweise: Ein Demo-GIF und Screenshots sind zentral zum Verständnis der Darstellung.
Status: Keine Rückmeldung zur Umsetzung; bisher keine bestätigte Lösung. Diskussion offen.
Hey @PinarPehlivan
Danke für die Bilder und ich habe anhand deiner Bilder weitere wichtige Infos entnehmen können, wie z. B. die URL mariagalland.com. Es fehlen aber etliche Angaben und Infos in deiner Frage die uns hier helfen können dir zu helfen und das führt dazu, dass wir weitere Fragen stellen müssen was das ganze erheblich verzögert.
Was ist das denn auch für ein Monitor den du im Bild zeigst, wenn ich fragen darf? Außerdem ist das erste Bild praktisch unerkennbar wie man hier sieht:
Also kann ich damit leider wenig anfangen und dir keine Antwort geben die du verdienst ¯_(ツ)_/¯.
Sende doch einen genauen Link zu einem Beispiel so dass wird das hier testen können.
VG,
vielen Dank für deine schnelle Antwort.
Maria Galland Kosmetik Online kaufen – Pinarcosmeticsshop (pinarcosmetics-shop.de) dies ist der Link zum Shop. Ich habe es gestern auch auf einen breiteren Monitor testen lassen, da ist es auch genauso.
@Gabe konntest du schon was herausfinden? ich bin leider nicht weiter
Hey @PinarPehlivan
Ich sehe dein Bild ist immer noch das alte das an den Seiten abgeschnitten wird. Das liegt daran dass euer Banner Bild sich nicht dem Bildschirm anpasst und somit viel zu breit ist ab 750px Bildschirmbreite → deswegen die schlechte Darstellung bei einer Bildschirmgröße >750px.
Die schnellste Lösung → Ihr müsst also das Bild mit einem anderen Aspekt in einem Bildeditor dimensionieren, wie z. B. 16:9.
Hier eine Demo dessen was ich meine:
Die folgenden Angaben sind ohne Gewähr und es kommt auf dein Theme drauf an: Du könntest auch einen CSS Code implementieren wie den folgenden aber das bitte mit einem Experten und in einer Testumgebung:
@media only screen and (min-width: 749px) {
#shopify-section-hero .hero--large {height: 140px;}
}
min-width: 749px erstellt die Regel, dass der Code nur bei einer minimalen Bildschirmbreite greift. Die height pixel Anzahl kann man auch anpassen, sprich, die 2 obigen Pixelzahlen im Codebeispiel einfach anpassen je nach euren Bedürfnissen.