Malibu: Logo im Header wird falsch bzw. gar nicht skaliert sondern gequetscht!

Hi Leute
Ich sitze schon seit Stunden bei mir im Testshop am Header vom neuen Theme auf Basis von Malibu.
Aktuell macht mir nur noch das Logo im Header Probleme.

Problem:
Das Logo wird zusammen gequetscht und nicht richtig skaliert wenn man das Browser Fenster immer kleiner schiebt.

Woran kann das liegen?
Grid Spalten usw. ist alles präzise ausgerechnet und passt auch. Bei Vollbild bzw. annähernd Vollbild sieht es auch einwandfrei aus und ist richtig proportioniert, aber wenn man das Browser Fenster kleiner schiebt, bis kurz bevor er auf die Mobile Variante umschaltet wird das Logo einfach zusammengequetscht statt richtig skaliert.

Ich hatte schon einen Lösungsansatz: Die Logo Höhe in StyleEdit statt in Pixel in Prozent angeben - dann klappt es mit der Skalierung einwandfrei - allerdings nur bei Firefox und Edge! Chrome und Safari zicken bei dieser Einstellung komplett rum und stellen den Header komplett fehlerhaft dar.

Für jegliche Tips bin ich dankbar,

Mfg

 

Ich habs gelöst!!

Hab mir einfach mal das CSS von Honeygrid angeschaut (dort funktioniert es nämlich einwandfrei mit der Skalierung)

Bei Honeygrid ist es:

Code:

.navbar-brand img, .navbar-brand svg

max-width: 100%;
height: auto;

Bei Malibu war es dagegen von Haus aus auf:

Code:

.navbar-brand img, .navbar-brand svg

max-width: 100%;
height: 100%;

Dadurch wurde das Logo gequetscht statt skaliert.

 

Funktioniert bei mir leider nicht, Logo wird weiterhin nicht skaliert, sonder gequetscht....
Ich habe auch keine Idee wir man die Kategorieren zentrieren kann.

 

Du hast ein
.navbar-brand img, .navbar-brand svg {
max-height: 100%;
height: 100%;
}
Das setzt sich davor.

Wenn Du den Code von DrGuu änderst in:

Code:

.navbar-brand img, .navbar-brand svg{
max-width: 100%;
height: auto important;
}

sollte das gehen.

 

Funktioniert leider nicht, wird trotz "important!" offenbar überschrieben...

 

"!important"

 

Das war es. Danke an Euch beide.

 

Muss das jeder Shop jetzt von Hand machen, oder ist das als Bug erfasst und schon eingearbeitet?

 

Wie bekommt man es denn bei Verwendung von Header1 in Malibu Styleedit4 hin, dass das Mini-Warenkorb-Symbol nicht in die nächste Zeile rutscht und dadurch das horizontale Menü die Seiteninhalte überlagert? Hat das wieder was mit diesen Spalten zu tun?

Also im Standard-Malibu-Theme habe ich das Problem auch, wenn
- frei gestaltbarer Bereich
- Suche
- Logo
- kleiner Warenkorb

aktiv sind. Eine größere Maximalbreite oder ein schmaleres Logo ändern daran auch nichts: Der Warenkorb rutscht in die nächste Zeile...

 

Hast du die sekundär Spalte deaktiviert?

 

War nicht. Habe ich mal probiert jetzt, aber dann ist das Warenkorb-Icon auch mit weg.

 

Entweder hast Du den kleinen Warenkorb, oder das Icon in der Sekundärspalte.
Beides macht man eigentlich nicht. Oder habe ich das falsch verstanden, dass nur das eine Icon runter rutscht?

Die Gridspalten müssen stimmen,
Logo + Suche + Freier Bereich + Sekundärspalte = 12 (der kleine Warenkorb sollte aus sein, wenn die Sekundärspalte an ist)

 

Ja so hat s geklappt, bevor mein Theme komplett die Biege gemacht hat. Ich war über 12 Gridspalten gewesen.

 

Ich möchte hier noch einmal nachhaken, da ich auch diese Probleme habe. Man kann ja kleine, mittlere und große Gridspalten verändern. Ich möchte gerne Logo, Suche, den freien Bereich und die Sekundärspalte nutzen. ohne dass da alles verrutscht. Anbei mal zwei Screenshots dazu. Immer, wenn ich den freien Bereich aktiviere, verschiebt sich alles. Vermutlich alles logisch und einfach für Euch Profis ;-)

 

Die gridspalten müssen passen.
Das heißt Logo + Suche + freier Bereich + Warenkorb = maximal 12.
Und das je Bildschirmgröße.
Wenn der Header also ohne freien Bereich passt, dann kann das nicht mehr passen wenn der freie Bereich dazu kommt. Da muss man von den anderen Teilen ein Stück wegnehmen

 

Ah, die Summe aller Spalten muss 12 ergeben. Jetzt habe ich das gecheckt Herzlichen Dank, Barbara!
Einzig die Ausrichtung kriege ich noch nicht angepasst. Der frei gestaltbare Bereich richtet sich irgendwie an die obere Kante aus. Gibt es da auch eine Lösung? Screenshot anbei.

 

Also ich habe nun so ziemlich alles probiert, aber der frei gestaltbare Bereich bleibt immer oben "kleben". Ich hätte ihn halt gerne so mittig wie das Suchfeld. Gibt es da keine Lösung? Hat das Problem sonst vielleicht auch noch jemand?

 

Eigentlich sollte es da ne EInstellung für den vertikalen Abstand für den freien Bereich im Styleedit geben die das regelt, sonst gehts auch per CSS zu Fuß.

 

Ich zitier dich nochmal damit dus siehst... Mir fiel gerade dein Logo im Shop auf, da fehlt ein p, das hast du vermutlich noch nicht bemerkt.

 

Ach Du Sch.... !!! Vielen Dank! Das wird natürlich sofort geändert.
Beim vertikalen Abstand wäre ich dankbar für jede Hilfe (notfalls auch CSS), da ich das echt nicht hinkriege...