ich nutze das Dawn Theme und wollte hier die Produktbilder in der Mobilen Ansicht auf der Produktseite in voller Breite anzeigen lassen (ohne Abstand zum linken und rechten Rand).
Dazu habe ich folgenden Code unter base.css geschrieben:
@media screen and (max-width: 749px) {
.slider.slider–mobile .slider__slide {
width: 100vw; /* Volle Breite /
margin-right: 15px; / Abstand zwischen den Bildern /
scroll-snap-align: center; / Zentrieren */
}
}
Die Bilder werden jetzt in voller Breite angezeigt, das passt soweit.
Allerdings habe ich jetzt das Problem, dass der “Slider” unter den Bildern, welcher anzeigt, auf welchem Bild man sich gerade befindet (bsp.: < 2/4 >), immer ein Bild zu viel anzeigt.
Wenn es bsp. 3 Produktbilder gibt, werden unten 4 angezeigt. Man kann aber nur bis zum 3ten gelangen < 3/4 >.
Wenn ich den Abstand (margin-right: 15px;) weg lasse, ändert dies auch nichts.
Wenn ich den Code aufteile (.slider.slider–mobile und .slider__slide seperat) und ihn folgendermaßen darstelle…:
Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Und nicht vergessen, du kannst ja jetzt den CSS Editor für so etwas verwenden.
Desweiteren:
Um das Problem mit dem Slider in der mobilen Ansicht zu lösen, bei dem ein Bild zu viel angezeigt wird, können wir die CSS-Anpassungen noch weiter verfeinern. Es scheint, dass die Verwendung von vw (Viewport Width) für die Breite der Bilder und des Containers möglicherweise nicht ideal ist, weil der Slider die Breite der Bilder falsch berechnet. Wir können versuchen, die Breite des Containers und der Bilder zu justieren, um sicherzustellen, dass die Bilder korrekt angezeigt werden und der Zähler korrekt funktioniert.
Hier ist ein angepasster CSS-Code, den du testen kannst, der sicherstellt, dass die Bilder in voller Breite angezeigt werden und der Zähler korrekt funzt:
@media screen and (max-width: 749px) {
.slider.slider--mobile {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.slider__slide {
flex: 0 0 100%;
scroll-snap-align: start;
margin-right: 0; /* Kein Abstand zwischen den Bildern */
}
.slider__slide img {
width: 100vw; /* Volle Breite */
}
}
Erklärung der Elemente:- Flexbox für Slider: Durch die Verwendung von display: flex; auf dem Slider-Container wird sichergestellt, dass die Bilder nebeneinander angeordnet sind.
Volle Breite für Bilder: Die Breite der Bilder wird mit 100vw festgelegt, um sicherzustellen, dass sie die gesamte Breite des Viewports einnehmen.
Kein Margin: Das margin-right: 0; entfernt den Abstand zwischen den Bildern, was sicherstellt, dass keine zusätzlichen Bilder angezeigt werden.
Hoffe das hilft dir weiter - lass wissen falls nicht!
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
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.
Ja, ohne Preview Link stehen wir hier im Dunklen ¯_(ツ)_/¯ da alle Themes ja anders aufgebaut sind. Du hast uns keinen Link zu diesem beispiel gegeben, so dass wir das in der Developer Console analysieren können. Das könnte ja auch eine Frontend App sein. Wenn du solche Angaben gleich zu Anfang gibst dann gibt es weniger hin-und-her.
An dieser Stelle kann dir ein Experte am besten helfen und gerne kann ich welche empfehlen.
Du könntest die vorhandene CSS-Anpassung leicht ändern, um sicherzustellen, dass keine zusätzlichen Platzhalter hinzugefügt werden. Versuche, den margin-right Wert zu entfernen und eine maximale Breite für die Slider-Elemente festzulegen:
Überprüfe, ob es ein JavaScript-Skript gibt, das die Anzahl der Slider-Elemente festlegt. Es könnte sein, dass das Skript ein zusätzliches leeres Slide-Element oder Platzhalter hinzufügt, wie oben abgebildet. Stelle sicher, dass dein Slider keine zusätzlichen Elemente oder Platzhalter erzeugt:
Da du das Dawn-Theme verwendest, könnte es hilfreich sein, die Slider-Komponente im Theme selbst anzupassen. Suche in den Theme-Dateien nach dem Slider-Code und stelle sicher, dass dort keine zusätzlichen Slides hinzugefügt werden.
Hier ist ein Beispiel für das, was du in der main-product.liquid odertheme.liquid sehen könntest:
{% for image in product.images %}
{% endfor %}
Hoffe das hilft dir weiter - lass wissen falls nicht!
.slider.slider–mobile .slider__slide {
flex: 0 0 auto;
width: 98%; /* Anpassbare Breite, um Probleme zu vermeiden /
box-sizing: border-box; / Berücksichtigt padding und border in der Breite */
}
Du kommst ja immer einen Schritt weiter - wo ein Wille da ein Weg - du schaffst das!
Am besten die Breite der Bilder (.slider__slide) auf 100vw setzen, um sicherzustellen, dass sie die volle Breite des Viewports einnehmen. Das box-sizing: border-box stellt sicher, dass alle Padding- und Border-Werte in der Breitenberechnung berücksichtigt werden. Der margin-right-Wert wird auf 0 gesetzt, um sicherzustellen, dass kein zusätzlicher Abstand zwischen den Bildern besteht, was zu einer falschen Berechnung führen könnte. Der margin-left-Wert für das erste Element wird auf 0 gesetzt, um sicherzustellen, dass das erste Bild korrekt am linken Rand beginnt.
