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.671
    Danke erhalten:
    285
    Danke vergeben:
    1.109
    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.671
    Danke erhalten:
    285
    Danke vergeben:
    1.109
    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:
    823
    Danke erhalten:
    183
    Danke vergeben:
    208
    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.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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:
    823
    Danke erhalten:
    183
    Danke vergeben:
    208
    Funktioniert leider nicht, wird trotz "important!" offenbar überschrieben...
     
  6. Dominik Späte
    Dominik Späte Erfahrener Benutzer
    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.251
    Danke erhalten:
    1.141
    Danke vergeben:
    391
    "!important"
     
  7. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    15. Mai 2017
    Beiträge:
    823
    Danke erhalten:
    183
    Danke vergeben:
    208
    Das war es. Danke an Euch beide.
     
  8. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    19. Juni 2012
    Beiträge:
    4.831
    Danke erhalten:
    1.125
    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.125
    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.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Hast du die sekundär Spalte deaktiviert?
     
  11. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    19. Juni 2012
    Beiträge:
    4.831
    Danke erhalten:
    1.125
    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.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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.125
    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:
    56
    Danke erhalten:
    6
    Danke vergeben:
    35
    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.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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:
    56
    Danke erhalten:
    6
    Danke vergeben:
    35
    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:
      25
  17. DJ-Checkpoint
    DJ-Checkpoint Erfahrener Benutzer
    Registriert seit:
    18. Juli 2011
    Beiträge:
    56
    Danke erhalten:
    6
    Danke vergeben:
    35
    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.311
    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.311
    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:
    56
    Danke erhalten:
    6
    Danke vergeben:
    35
    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...