@Esra47
Ja, somit musst du entweder erwägen deine Bilder mit den korrekten Aspekten vor dum Upload mit einen guten Bildeditor Software vorzubereiten so dass die Bilder mit den korrekten Aspekten in die Container und Platzhalter deines Gratis Dawn Themes passen und angezeigt werden. ODer du musst das mit einer relativ komplexem Prgrammierung loesen (siehe Beispiel dazu weiter unten).
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 denen 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 negativ 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 sicherzustellen, dass die Bilder in der mobilen Ansicht korrekt angezeigt werden, musst du einige Anpassungen im CSS vornehmen. CSS Media Queries können z. B. sicherstellen, dass die Bilder auf mobilen Geräten richtig skaliert und angezeigt werden.
Hier ein Beispiel eines CSS Code samt meinen Kommentaren die erklären was jede Codezeile unter der Haube ausführt:
/* Stellt sicher, dass Bilder in der mobilen Ansicht vollständig angezeigt werden */
.thumbnail img {
width: 100%;
height: auto;
object-fit: contain; /* Stellt sicher, dass das gesamte Bild sichtbar ist */
}
/* Stellt sicher, dass der Slider in der mobilen Ansicht korrekt angezeigt wird */
.slider--mobile .slider__slide {
flex: 1 0 100%; /* Jedes Bild nimmt die volle Breite des Containers ein */
}
@media (max-width: 768px) {
/* Spezifische Anpassungen für mobile Geräte */
.thumbnail-list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.thumbnail-list__item {
flex: 0 0 auto;
margin-right: 10px; /* Abstand zwischen den Thumbnails */
}
.thumbnail img {
width: 100px; /* Passen Sie die Größe der Thumbnails an */
height: auto;
}
}
Erklärung der obigen CSS-Regeln:
- .thumbnail img: Stellt sicher, dass die Bilder die volle Breite des Containers einnehmen und das Seitenverhältnis beibehalten.
- .slider--mobile .slider__slide: Sorgt dafür, dass jedes Bild die volle Breite des Containers in der mobilen Ansicht einnimmt.
- @media (max-width: 768px): Fügt spezifische Anpassungen für Geräte mit einer maximalen Breite von 768px hinzu.
- .thumbnail-list: Stellt sicher, dass die Thumbnails in einer Zeile angezeigt werden und horizontal gescrollt werden können.
- .thumbnail-list__item: Sorgt dafür, dass die Thumbnails nebeneinander angezeigt werden und ein kleiner Abstand zwischen ihnen besteht.
- .thumbnail img: Passt die Größe der Thumbnails an, um sicherzustellen, dass sie in der mobilen Ansicht gut sichtbar sind.
Durch diese Anpassungen kann man Bilder in der mobilen Ansicht korrekt anzeigen. Teste dass aber, wie gesagt, mit einem Experten, auf verschiedenen mobilen Geräten, um sicherzustellen, dass sie wie gewünscht funktionieren.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
