Css Image aspect ratio auf Produktdetailseite lässt Bild über spalte wachsen

[rocket-dev]

Hallo zusammen,

um die Bilder auf der Produktdetailseite im quadratischen Verhältnis darzustellen nutze ich in der base css:

.product__media{
aspect-ratio:1;
}

das hat soweit auch ganz gut funkioniert, allerdings scheint damit die Containerbreite des äusserden Containers nicht mehr genutzt zu werden.

somit kommt es dann teilweise zu dieser Darstellung:

Siehe auch:

https://dvvlbv1nv8mxd4ce-19788179.shopifypreview.com/products/luftige-einfarbige-pluderhose-in-schwarz

irgendwie hängt das ganze auch zusammen wie groß das Browserfenster skaliert ist.

Theme ist dawn 11.0

Jemand eine Idee wie man das beheben kann ?

Danke und Grüße

[Gabe]

Hey @rocket-dev

Ich sehe derzeit folgendes was eigentlich toll aussieht:

Beim rumfeilen mit dem Code und CSS rate ich zur Vorsicht und es immer in einer Testumgebung zuerst machen ansonsten kann man das Theme ziemlich zerschiessen! Dann muss man auch abwägen, ob das basteln im Code es wirklich deine vielen Stunden und Zeit und Energie wert ist, denn die Themes machen ihre Sache eigentlich out-of-the-box ganz gut.

Apropos mir ist aufgefallen, dass ihr keinen Favicon habt, der wichtig für euer Branding im Internetverlauf des Users ist.

---

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[rocket-dev]

Hi @Gabe ,

danke für deine Unterstützung. Ich konnte das Problem bereits lösen indem ich nicht über eine Anpassung der base.css gegangen bin sondern direkt in das style in der Liquid file product_thumbnail.liquid

Hier habe ich jetzt einfach die Aspect Ratios von 1.0 hinterlegt und jetzt springt das Bild nicht mehr über den Container.

Vielen Dank auch für den Hinweis mit dem Favicon.

Grüße

Andreas

hier wird

[Gabe]

Super!