bilder verkleinern Desktop mit Abstand rechts und links

[Afram]

Hey, 

Ich habe einen Problem mit den Bildern Auf dem Desktop . Undzwar ist das Problem dass die Bilde viel zu viel platz nehmen also die sind viel zu groß deshalb wollte ich fragen ob man nicht für die Desktop variante, links und rechts Abstand machen kann sodass das Bild in der Mitte bleibt aber dafür halt kleiner und dementsprechend ist dann rechts und links ein Abstand. Weil auf der Mobile version ist alles okay . Und ich habe auch einen BildSeitenverhältnis von 3 zu 2 also daran kann es auch nicht liegen.

Ich hoffe Jemand kann mir helfen.

mit freundlichen Grüßen

Afram

[Kai]

Hi @Afram, 

vielen Dank für deinen Post. 

Welches Theme verwendest du genau?

Wer dein Theme entwickelt hat und unterstützt siehst du so nach.

Da du dich gerade mit dem Design deines Shopify Shops beschäftigst, dachte ich kannst du bestimmt auch von diesen Tips zum Thema profitieren, die erlautern, wie man einen Shopify Shop erstellt, der sich von anderen abhebt. Welche der darin erhaltenen Vorschläge würdest du in deinem eigenen Shop gerne umsetzen?

Ich freue mich auf deine Antwort,

[Afram]

Hey @Kai,

ich bentze das Theme Dawn-Version 9.0.0

[Gabe]

Hey Afram! @Afram 

Das Dawn Theme ist ein "Large Images" und "Media Forward Produktseiten" Theme wie man auf der Dawn Theme Landingpage lesen kann. Sprich, es ist designed, um große Produktbilder zu präsentieren, die dein visuelle Markenstorytelling unterstützen:

Hast du auch andere Themes zum Shop hinzugefügt um sie zu testen und schauen ob sie für deine Produkte und dein Branding besser geeignet sind? Meine Empfehlung wäre man sollte es lieber nicht nur beim "Standard Dawn Them lassen.

Wenn du das aber DIY im Code machen möchtest

Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Um den Platz, den die Bilder auf deinem Desktop im Dawn Theme einnehmen, zu reduzieren, kannst du den CSS-Code des Themes ändern, um Abstände hinzuzufügen oder die Bildgröße zu ändern. Bitte beachte, dass diese Änderungen ein gewisses Verständnis für Webentwicklung erfordern und ich empfehle hier, wie gesagt, dich mit einem Webentwickler zusammen zu tun.]

Du kannst ganz unten in einer Theme Kopie in der Assets -> base.css einen Code wie den folgenden ergänzen, oder eben den neuen CSS Editor direkt im Theme dafür verwenden:

@media screen and (min-width: 992px) {
    .your-image-class {
        max-width: 80%; /* Ändern Sie diesen Wert entsprechend Ihrer Vorstellung */
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

Ersetze ".your-image-class" durch die tatsächliche Class deiner Bilder. Du kannst die Class deiner Bilder finden, indem du auf der Seite einen Rechtsklick auf das Bild machst -> "Inspect".

Dieser CSS-Code stellt sicher, dass die Änderungen nur auf Desktop-Bildschirmen angewendet werden (Bildschirme, die breiter als 992px sind). Es ändert die maximale Breite des Bildes auf 80% und zentriert das Bild horizontal.