Dawn Theme Multicolumn Image Size

Hallo Ihr Lieben,

ich bin gerade dabei meinen Shop aufzubauen mit dem Dawn Theme.
Soweit klappt auch alles einwandfrei, jedoch würde ich gerne in der Section “Multicolumn/Mit mehreren Spalten” die Größe der Bilder anpassen. Sie werden aktuell wesentlich groß dargestellt.

Hat jemand eine Idee wo man das ändern kann? Ich nehme an in der Multicolum.liquid Datei?

Lieben Gruß

1 Like

Hey @Reiseschmaus

Danke fuer das Bild und das neue 2.0 OS Dawn Theme ist eine klasse Wahl und sogar gratis!

Den Multicolumn Abschnitt habe ich jetzt mit einen 500x180px Foto probiert und es scheint etwas kleiner angezeigt zu werden wie man unten sieht. Kannst du das nochmal mit dem Bild probieren mit ca. 200x200px oder 150x150px, wenn im 1:1 Aspekt?

Hallo Gabe,

danke für deine Antwort. Das Icon, welches ich hochgeladen habe, hat die Abmessung von 100x100px.

Habe es jetzt auch nochmal mit 200x200px hochgeladen, aber keine Veränderung.

Lieben Gruß

@Reiseschmaus

Gut, da das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time.

Schicke uns eine E-Mail hier → https://bit.ly/3cwO7ym von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, kann unser Theme Team das anschauen, sowie auch andere Fragen die du zum Dawn Theme hast.

Hallo.

Ich habe genau das gleiche Problem.

Es wen darf ich mich wenden?

Danke im voraus,

Tobias

@Metallfuxx

Siehe meinen vorherigen Beitrag oben.

Hallo Gabe! Hier ist Ari vom Cookies und Tortenshop :slightly_smiling_face:

Habe tatsächlich auch das Problem mit der Multicolumn Bild Grösse, allerdings möchte ich es grösser haben. Gibt es da einen Code?

LG Ari

Hey Ari! @aribakes

Es kommt auf die Originalgröße deines Bildes drauf an. Ich habe jetzt ein großes Bild für meinen Multicolumn Abschnitt verwendet und es sieht wie folgt aus:

Stelle natürlich auch sicher, dass du jegliches Padding, um das Bild rum, im Bildeditor vorher herausschneidest, wie du es in meinem Beispiel um das Herz rum oben sehen kannst.

Du kannst ein CSS-Code wie den folgenden hinzufügen, um die Bildgröße in der “Multicolumn”-Section zu ändern (siehe da auch meine Kommentare im Code):

/* Anpassung der Bildgröße in der Multicolumn-Section */
.multicolumn-card__image {
  width: 100%; /* Sorgt dafür, dass das Bild die volle Breite des Containers einnimmt */
  height: auto; /* Passt die Höhe automatisch an, um das Seitenverhältnis beizubehalten */
  max-width: 100%; /* Begrenzung der maximalen Breite */
}

.multicolumn-card__image img {
  object-fit: cover; /* Sorgt dafür, dass das Bild den gesamten Bereich abdeckt */
  width: 100%; /* Sorgt dafür, dass das Bild die volle Breite des Containers einnimmt */
  height: 100%; /* Passt die Höhe automatisch an, um das Seitenverhältnis beizubehalten */
}

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink: