FROM CACHE - de_header

Größe des Logos im Header

Größe des Logos im Header

tkaemmerer
Neues Mitglied
7 0 0

Hallo, auch ich habe eine Frage zu dem Logo im Header unseres Webshops. Ich benutze das Thema "publisher". Ich kann das Logo zwar hochladen, doch schaffe ich es einfach nicht, das Logo zu vergrößern. Es ist viel zu klein. Da es rechteckig ist, sollte es rechts bis kurz vor das Symbol der Lupe reichen. Screenshot.PNG

10 ANTWORTEN 10

VIVID_24
Entdecker
37 4 9

Hallo @tkaemmerer evtl. probiere diesen Code in der CSS:

 

.header__heading-logo {
    max-width: 80px;
}
 
60px ist eingestellt auf der Demo Seite, probiere es mit 80px aus oder dann einfach die Zahl anpassen.
 
Hoffentlich hilft dir das - Gruß Markus
tkaemmerer
Neues Mitglied
7 0 0

Guten Morgen Markus, vielen Dank für Deine Antwort. Doch in welchem Liquid genau soll ich diese Zeilen einfügen? Mit besten Grüßen, Tom.

VIVID_24
Entdecker
37 4 9

Hallo Tom, den Code fügst Du einfach auf Deiner Startseite ein, also in Deinem Theme auf anpassen gehen. Dann gehst Du Links auf das Rädchen "Theme Einstellungen" dann auf benutzerdefinierte CSS.

tkaemmerer
Neues Mitglied
7 0 0

Vielen Dank für die schnelle Antwort. Leider hat dieser Eintrag merkwürdiger Weise lediglich Auswirkung auf die mobile Version der Webpage, nicht jedoch auf die Desktop-Version. Gibt es eine Möglichkeit, das Logo auch in der Desktop-Version zu vergrößern und wenn ja, welche?

VIVID_24
Entdecker
37 4 9

Also, das ist etwas merkwürdig, da desktop und mobil gleich sind, nur mit media screen passt man das nach unten an (also mobil) kannst Du mir mal deine Webseite nennen, da schau ich mal bei dir drauf und kann evtl. dort den Fehler sehen

tkaemmerer
Neues Mitglied
7 0 0

Bitte entschuldige, daß ich erst jetzt antworte. Unsere Webpage findest Du unter: https://6e7986-2b.myshopify.com/. Der Webshop ist noch nicht freigeschaltet. Du wirst sofort das Problem sehen: Das Logo sollte deutlich breiter werden.

VIVID_24
Entdecker
37 4 9

Hallo,  ja das mein Code nicht funktioniert ist mir jetzt auch klar, weil das ist ja eine Passwortseite und dort heißt der anders. Also ich schreib dir jetzt diesen Code, der für deine Passwortseite gilt. Den anderen bitte aufheben für deine Eröffnung oder mir ins Postfach schreiben, dann Helfe ich dir.

 

PS: Versuch eine SVG Logo zu nehmen, da PNG oder JPG Dateien nicht skalierbar sind.

 

Gib mal folgenden Code ein:

 

.password-logo {
    max-width: 500px;
    width: 500px;
    height: auto;
}
@media only screen and (max-width: 900px)
    .password-logo {
        max-width: 400px;
        width: 400px;
        height: auto;
       }
}
@media only screen and (max-width: 480px) {
    .password-logo {
        max-width: 300px;
        width: 300px;
        height: auto;
       }
}
 
Also in meiner Vorschau funktioniert es, schreib mir ob ich so helfen konnte, evtl. legst Du neben deinen Logo auf 2 Zeilen dein Schriftzug an.
 
Viele Grüße Markus
 
Nachtrag: Im Shop dein Logo anzupassen, dafür müsste ich darauf zugreifen können,  du kannst mir dein Passwort per Nachricht senden, dann sieht es keiner, dann kann ich diesen anpassen.
tkaemmerer
Neues Mitglied
7 0 0

Hallo Markus, zuerst einmal vielen Dank für all Deine Bemühungen. Doch bevor ich verzweifle, hier das Passwort: "Ugarit2024". Ich hoffe, Du kannst die Einstellungen des Shops öffnen und das Logo entsprechend vergrößern. Denn so, wie es jetzt aussieht, kann das nicht bleiben. Beste Grüße, Tom 

VIVID_24
Entdecker
37 4 9

Hallo @tkaemmerer kein Problem. Also folgender Code sollte dein Logo jetzt größer machen, aber das Logo ist nur 300 x 54px breit, das heißt es wird verschwommen aussehen, weil nur SVG skalierbar ist. Entweder SVG Graphik erstellen oder ein anderes Logo mit der Größe mindestens 500px breit erstellen.

 

.header__heading-logo {
    max-width: 100% !important;
    width: 500px;
}

 

Beste Grüße Markus

Gabe
Shopify Staff
18409 2886 4249

Hey @tkaemmerer 

 

Wie @VIVID_24 sagt...Probiere es auch mal mit dem folgenden fast gleichen CSS aber mit der!ImportantRegel:

 

.password-logo {
   width: 200px; /* Passe die Breite nach Bedarf an */
   height: auto; /* Automatische Höhe zur Beibehaltung des Seitenverhältnisses */
}

 

ODER:

 

.password-logo {
   width: 200px; 
   height: auto; 
   max-width: none; /* Entferne jegliche maximale Breitenbeschränkung */
}

 

Oder mit der !Important Regel:

 

.password-logo {
   width: 200px !important; 
   height: auto !important; 
   max-width: none !important; /* Entferne jegliche maximale Breitenbeschränkung */
}

 

image.png
 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

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