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

Thema wurde von Anonymous, 5. Juni 2020 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.551
    Danke erhalten:
    228
    Danke vergeben:
    1.001
    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
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.551
    Danke erhalten:
    228
    Danke vergeben:
    1.001
    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.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Mai 2017
    Beiträge:
    693
    Danke erhalten:
    129
    Danke vergeben:
    181
    Funktioniert bei mir leider nicht, Logo wird weiterhin nicht skaliert, sonder gequetscht....
    Ich habe auch keine Idee wir man die Kategorieren zentrieren kann.
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Mai 2017
    Beiträge:
    693
    Danke erhalten:
    129
    Danke vergeben:
    181
    Funktioniert leider nicht, wird trotz "important!" offenbar überschrieben...
     
  6. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    940
    Danke erhalten:
    811
    Danke vergeben:
    301
    "!important"
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Mai 2017
    Beiträge:
    693
    Danke erhalten:
    129
    Danke vergeben:
    181
    Das war es. Danke an Euch beide.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    19. Juni 2012
    Beiträge:
    4.831
    Danke erhalten:
    1.122
    Danke vergeben:
    947
    Muss das jeder Shop jetzt von Hand machen, oder ist das als Bug erfasst und schon eingearbeitet?
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    19. Juni 2012
    Beiträge:
    4.831
    Danke erhalten:
    1.122
    Danke vergeben:
    947
    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...
     
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Hast du die sekundär Spalte deaktiviert?
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    19. Juni 2012
    Beiträge:
    4.831
    Danke erhalten:
    1.122
    Danke vergeben:
    947
    War nicht. Habe ich mal probiert jetzt, aber dann ist das Warenkorb-Icon auch mit weg.
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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)
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    19. Juni 2012
    Beiträge:
    4.831
    Danke erhalten:
    1.122
    Danke vergeben:
    947
    Ja so hat s geklappt, bevor mein Theme komplett die Biege gemacht hat. Ich war über 12 Gridspalten gewesen.
     
  14. DJ-Checkpoint

    DJ-Checkpoint Erfahrener Benutzer

    Registriert seit:
    18. Juli 2011
    Beiträge:
    50
    Danke erhalten:
    5
    Danke vergeben:
    32
    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 ;-)
     

    Anhänge:

  15. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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
     
  16. DJ-Checkpoint

    DJ-Checkpoint Erfahrener Benutzer

    Registriert seit:
    18. Juli 2011
    Beiträge:
    50
    Danke erhalten:
    5
    Danke vergeben:
    32
    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.
     

    Anhänge:

    • passt.jpg
      passt.jpg
      Dateigröße:
      700,6 KB
      Aufrufe:
      24
  17. DJ-Checkpoint

    DJ-Checkpoint Erfahrener Benutzer

    Registriert seit:
    18. Juli 2011
    Beiträge:
    50
    Danke erhalten:
    5
    Danke vergeben:
    32
    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?
     
  18. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    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ß.
     
  19. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    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.
     
  20. DJ-Checkpoint

    DJ-Checkpoint Erfahrener Benutzer

    Registriert seit:
    18. Juli 2011
    Beiträge:
    50
    Danke erhalten:
    5
    Danke vergeben:
    32
    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...