Anpassung Symbole Mobile Header

[Rosallie]

 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 

[Gabe]

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.