Brooklyn Theme Logo Größe auf mobiler Ansicht ändern

[christenie]

Hallo Zusammen,

ich habe das Problem, dass ich die Logogröße auf desktop sicht zwar ändern kann, diese aber auf mobiler Sicht stets gleich klein bleibt.

Weiß jemand wie ich die Logogröße auch für die mobile Sicht verändern kann?

Vielen Dank

[r8r]

@christenie kannst Du bitte einen Link zu Deinem Shop teilen? Dann lässt sich das Problem am lebenden Patienten leichter analysieren.

Danke!

Mario

[christenie]

https://lightupyourworld.eu/ , Danke!

[Finer]

@christenie du kannst im Code-Editor des Themes in die theme.scss Datei gehen und folgendes am Ende hinzufügen:

@media screen and (max-width: 768px)
.site-header__logo img {
    max-width: 75%!important;
}

In diesem Code ist ein Wert von 75 % angelegt, diesen kannst du natürlich nach Belieben anpassen.

[christenie]

Hey, habe es gerad versucht, allerdings verschwindet dann der transparente Header und es wird mir auch ein Fehler angezeigt wenn ich das Theme bearbeiten will 

[r8r]

@christenie die max-height Angabe sperrt die Größe des Logos. Probier's mal damit:

@media screen and (max-width: 768px)
.site-header__logo.site-header__logo img {
  max-height: 100px; /* dieser Wert ist flexibel! */
}

Vorher:

Nachher:

Tendenziell würd ich noch empfehlen, dass das Header-Logo nicht so viel (transparenten) Leerraum an den Rändern haben sollte. Dann würd das Logo auch schon ohne CSS-Anpassung ein wenig größer erscheinen!

Ich hoffe, dass das hilft!

Mario 

[christenie]

Hey, 

hat geklappt! Danke dir! Allerdings ist die Website an sich jetzt ganz anders.

Und der transparente Header ist auch wieder weg.

Habe es öffentlich daher, kannst du hier direkt sehen was ich meine: lightupyourworld.eu

[r8r]

@christenie Was besagt denn der Fehler und wan tritt der ganz genau auf?

[christenie]

Ahh, hatte gedacht, dass der Fehler mit deinem neuen Code weg war, aber er ist doch noch da. Ich hänge ihn mal an. 

[r8r]

@christenie Sorry – mein Fehler. Wenn ich Mediaqueries aus den Chrome Dev-Tools rauskopiere, dann gehen Klammern verloren … das hatte ich nicht bedacht. Bitte auf folgendes ändern:

@media screen and (max-width: 768px) {
  .site-header__logo.site-header__logo img {
    max-height: 100px; /* dieser Wert ist flexibel! */
  }
}

LG, Mario

[Kai]

Hey Christenie,

nur als kurze Anmerkung, wenn du vor Codeanpassungen dein Theme einmal abspeicherst, hast du immer eine funktionierende Version deines Shopify Shops gesichert, nur für den Fall der Fälle.

[Kai]

Hi Christenie,

vielen Dank für deinen Post zu deinem Shopify Shop mit Brooklyn. Was für Produkte verkaufst du damit und an wen?

Wusstest du, dass du mit jedem bezahlten Shopify Plan auch 60 Minuten Designtime kostenlos dazu bekommst, wenn du eins unserer Shopify Themes benutzt? Was in deinem Shop mit Brooklyn der Fall ist.

Um die Designtime in Anspruch zu nehmen, würdest du uns eine E-Mail schreiben mit:

* Einer kurzen Erläuterung der Problematik / Designanfrage und warum du die Änderung vornehmen möchtest.

* Screenshots / Bildschirmaufnahmen des Problems / der Designanfrage.

* Links zu den betroffenen Seiten in deinem Shop.

Meine Kollegen würden dir daraufhin in 24-48 Stunden antworten und deine Anfrage an unsere Themedesigner weiterleiten, um abzuklären, ob die Änderungen so vorgenommen werden können, bevor diese dann mit der Arbeit anfangen, was in etwa 24-72 Stunden passiert.

Da du dich gerade mit dem Design deines Shopify Shops beschäftigst, dachte ich kannst du bestimmt auch von diesen Tips zum Thema profitieren.