Größe des Logos im Header

[tkaemmerer]

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. 

[VIVID_24]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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 */
}

 

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