Shopify-Themes, Liquid, Logos und ähnliche Themen
Hey,
Wie man im unteren Bild erkennen kann, lässt sich die Mobile Page im Venture Theme leider durch "Zur Seite ziehen" beim bedienen der Website weiter zur Seite ziehen als eigentlich sein sollte. Dadurch entsteht hier rechts ein Balken, der eigentlich nicht sein dürfte und das Shopping-Erlebnis massiv beeinträchtigt. Kann das Design so begrenzt werden, dass es nicht mehr möglich ist die Website zu "verschieben"?
Danke im Vorhinein!
Gelöst! Zur Lösung
Erfolg.
Hey @Julian_HR @mk798 @ChristianDE
Ich habe das etwas nachgehakt in den Entwickler Foren in Github und es scheint dies wird vom #StickNavWrapper
verursacht der keinen overflow
hat im "mobile set". Ein Hotfix wäre es ggf. ganz unten im theme.scss
das folgende Code hinzufügen, aber es klappt nicht immer:
@include media-query($small) {
#StickNavWrapper {
overflow: hidden;
}
}
Hier sollte man die ID verwenden anstatt die Sticky Class
, da die add-to-cart notifications die Class teilen, was das Problem verursacht hat, dass die Message nicht angezeigt wird.
Beispiel im Google Chrome Inspector Tool (Rechtsklick -> Inspect):
Die andere Möglichkeit ist (wie ich weiter oben im Leitfaden sage), dass es vom .notification__message span
verursacht wird, dass es nicht auf Wrap oder Umbruch auf Handy eingestellt ist. Da der Text nicht umgebrochen ist, verursacht er den zusätzlichen schwarzen Balken auf der rechten Seite.
Hier das obige Beispiel mit der eigentlichen Nachricht, die erscheint, nachdem etwas in den Warenkorb gelegt wurde:
Man kann die overflow: hidden;
Lösung implementieren im #StickNavWrapper
aber es ist nicht optimal, da die Message immer noch abgeschnitten wird:
Vor diesem Hintergrund wäre hier eine andere Lösung, den Text auslaufen zu lassen:
.notification__message span {
white-space: pre-wrap;
}
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
Bist du ein EU-Dropshipping Supplier, 3PL-Streckengeschäft Lieferant, oder ein Spediteu...
By Gabe Apr 18, 2024Wie du eine intuitive und ansprechende Online-Shopping-Experience für deine Kunden au...
By Gabe Apr 1, 2024Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024