Problem: In einer Shopify-Logo-Liste bricht der Text beim letzten Icon je nach Browserbreite in zwei bis drei Zeilen um. Gewünscht ist eine Ausrichtung der Icons an der oberen Kante statt am Text unten; Theme-Einstellungen bieten nur die Bildgröße.
Klärung: Wegen Theme- und Browser-Abhängigkeit wurde ein Vorschau-Link angefordert und bereitgestellt. Das Verhalten ist responsiv (Layout passt sich der Bildschirmbreite an).
Vorgeschlagene Lösungen:
CSS-Anpassung: Eine feste Höhe für den Logo-Titeltext setzen (z. B. für Desktop per Media Query), damit max. zwei Zeilen gleich hoch sind. Ein konkreter Code-Snippet wurde geliefert (in style.css, Selector für die Sektion und .logo-list__logo-title mit height: 50px ab 768px Breite).
Inhaltliche Anpassung: Zu lange Titel kürzen, da der Zeilenumbruch durch die Textlänge im Container verursacht wird.
Hinweise: Ein Screenshot und ein CSS-Codeausschnitt sind zentral zur Lösung. „Responsive“ bedeutet, dass sich das Layout an verschiedene Bildschirmgrößen anpasst; CSS steuert die Darstellung.
Status: Keine Rückmeldung zur Wirksamkeit der CSS-Änderung; Diskussion derzeit offen/unentschieden.
Wie ihr sehen könnt, ist das letzte Icon leider zwei bzw. je nach Format des Browsers dreizeilig. Kann mir jemand beantworten, ob es die Möglichkeit gibt das alle Icons nach oben zentriert angezeigt werden? Quasi die obere Kante der Icons ist die, an der sich alles Ausrichtet und nicht der Text unten.
Ansonsten kann ich in den Einstellungen leider nichts ändern, außer die Größe des Bildes. Wenn es nur eine kleinere Änderung im Code ist, oder evtl. ein anderes Element besser dazu passt ist es ja hoffentlich schnell erledigt.
Danke für die Frage und da das ganze Theme- und Browser-Typ/Breite-abhängig ist, wäre ein Link hier sehr hilfreich ansonsten stehen wir im Dunklen. Auf meinem Browser könnte das mit dem Zeilenumbruch anders aussehen als auf deinem da das meist Responsive ist. Hast du vielleicht einen Vorschau-Link für uns?
Ich denke, Sie können eine Höhe für Ihren Text festlegen, wenn Sie maximal zwei Textzeilen haben, dann können Sie diese Höhe auf die Höhe Ihrer zwei Textzeilen einstellen.
Wenn Sie mit dem Code nicht sehr vertraut sind, können Sie mir Ihre Shop-Adresse mitteilen und ich kann Ihnen den genauen Code zur Verfügung stellen.
Die Höhe für den Text kann ich aber nur im Code festlegen, oder? Die Version ist leider noch nicht online und für uns nur eine Kopie in der wir Arbeiten. Was meinst du genau mit “Shop-Adresse”?
Der Ursache des Zeilenumbruch, wie ich es sehe, ist dass der Titel zu lange für den Container ist und du diesen kürzen könntest wenn jegliche Codeänderungen nicht funzen:
