Guten Morgen an euch
ich wollte nachfragen ob man die Symbole in der Mobilen Ansicht bischen enger aneinander bekommt ? Oder kann sich das negativ auf die Desktopansicht auswirken ? Wäre für Hilfe dankbar .
Beste Grüße
Topic summary
Anliegen: Symbole im mobilen Header enger platzieren, ohne die Desktop-Ansicht negativ zu beeinflussen. Ein Screenshot wurde bereitgestellt; zur genaueren Analyse wurde ein befristeter Vorschaulink erbeten.
Vorgeschlagene Lösungen (CSS mit Media Queries, damit Desktop unberührt bleibt):
- Bei max-width: 1051px: .header .icon kleiner und leicht versetzt (font-size und position/top anpassen), um Icons näher zusammenzubringen.
- Bei max-width: 425px: gezielte Positions-/Größenanpassungen für Mini-Warenkorb (.mini-cart-icon) und Suche (.search-icon) via position: absolute und konkreten top/left-Werten.
Hinweise:
- Wirkung hängt vom verwendeten Theme ab; Änderungen auf verschiedenen Geräten/Bildgrößen testen.
- Absolute Positionierungen sind empfindlich gegenüber Theme-Updates/anderen Elementen.
- Bei fehlender CSS-Erfahrung wird Unterstützung durch Entwickler/Shopify-Experten empfohlen.
- Verweise auf ähnliche Threads wurden gegeben für weiterführende Beispiele.
Einschätzung Desktop-Auswirkung: Durch Media Queries bleiben Desktop-Styles unverändert, solange die Regeln nur für kleinere Viewports greifen.
Status/To-dos:
- Vorschaulink bereitstellen, damit eine zielgenaue Prüfung in der Dev Console erfolgen kann.
- Anpassungen testen und bei Bedarf feinjustieren. Diskussion derzeit offen, keine abschließende Lösung bestätigt.
Hey @Rosallie
Danke für das Bild aber bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller in der Chrome Dev Console zu analysieren.
Du könntest beispielsweise einen CSS Snippet wie diesen hier ausprobieren, ich empfehle das aber mit einem Programmierer zu machen so dass es keine negativen Auswirkungen auf andere Page Elemente hat, oder auf die Desktop Ansicht:
@media screen and (max-width: 1051px) {
.header .icon {
font-size: 1rem;
top: 0.25rem;
position: relative;
}
}
Dieser Code bewirkt, dass die Symbole auf kleineren Bildschirmen (maximale Breite von 1051px) kleiner und näher beieinander angezeigt werden (siehe mehr dazu in diesem Thread).
Eine andere Möglichkeit, speziell für das Mini-Cart-Icon und das Such-Icon, ist das Hinzufügen von folgendem Code:
@media (max-width:425px)
{
.mini-cart-icon {
position: absolute !important;
top: 35px !important;
left: 45px !important;
}
.header-search-1 .search-icon {
min-width: 25px !important;
text-align: center !important;
font-size: 16px !important;
position: absolute !important;
top: -53px !important;
left: -224px !important;
}
}
Dieser Code passt die Position und Größe der Icons speziell für mobile Geräte mit einer maximalen Bildschirmbreite von 425px an (siehe mehr dazu in diesem Thread und auch in diesem Thread).
Bitte beachte, dass CSS-Anpassungen je nach deinem spezifischen Shopify-Theme variieren können. Es ist wichtig, dass du die Änderungen auf verschiedenen Geräten und Bildschirmgrößen testest, um sicherzustellen, dass sie wie gewünscht funktionieren. Falls du nicht vertraut mit CSS bist oder die Anpassungen nicht wie erwartet funktionieren, kann es hilfreich sein, einen Shopify-Experten oder Webentwickler zu konsultieren.
Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach 
!
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.
1 Like