Produkttitel mobile Anzeige

Deutsch Diskussion Shopify Design

Topic summary

Problem: In der mobilen Ansicht sitzt bei einem Produkt der Titel zu tief. Preise wurden per Code bereits auf eine Höhe gebracht; Typografie auf 105% (Überschrift und Text). Ein Screenshot zeigt das Verhalten (zentrales Belegmaterial).

Vorgeschlagene Lösung: Einsatz eines mobilen CSS-Media-Querys (max-width: 480px) zur Textausrichtung. Beispielcode zentriert den Text, muss aber an die richtige CSS-Klasse des Themes angepasst werden (der Beispiel-Selektor .product-single__meta .rte ist ggf. falsch).

Implementierung: Bevorzugt über den Shopify CSS-Editor (eigene CSS), sonst in Assets → base.css am Ende einfügen. Die korrekte Klasse per Chrome DevTools (Entwicklertools) ermitteln. Vor Änderungen: Theme duplizieren/Backup; Risiken: Ladezeiten, Ausschluss von Theme-Updates.

Aktueller Stand: Nach Einfügen des Codes ändert sich nichts – vermutlich wegen eines nicht passenden Selektors oder Abschnitts (z. B. „Vorgestellte Kategorie“).

Nächste Schritte/Outcome: Link zu einem konkreten Beispiel im (englischsprachigen) Expertenforum posten, damit gezielt geprüft werden kann. Diskussion offen, keine finale Lösung; Schlüsselpunkt ist das Auffinden des korrekten CSS-Selektors.

Summarized with AI on January 9. AI used: gpt-5.
4

Hey @Rosallie

Ich rate mal es ist ein Vorgestellte Kategorie Abschnitt in deinem Bild? Dafür gibt es jetzt den CSS Editor um deinen Theme nicht aus den Theme-Updates auszuschließen. Dieser ist jedoch beschränkt wie du im Link lesen kannst und dann muss man gelegentlich den Code in die Assets → base.css Datei an unterster Stelle einfügen und speichern.

Du musst halt die korrekte Class in den Code einfügen. Im obigen Code ist sie .product-single__meta .rte { was nicht unbedingt die korrekte Class in deinem Fall ist und du musst sie einfach mit der richtigen Class ersetzen. Diese kannst du in der Chrome Developer Console ausfindig machen. Was sagt unser Experte @Finer dazu?