Rich Text bearbeiten

Topic summary

Problem: Im Shopify Dawn-Theme ist der Zeilenabstand im Rich-Text-Bereich zu groß.

Lösung: In der Datei section-rich-text.css folgenden Code am Ende einfügen:

.rich-text__text {
  line-height:1.4;
}

Der Wert 1.4 kann individuell angepasst werden.

Zusätzliches Problem: Bei einem Nutzer des Prestige-Themes funktioniert die Lösung auf dem iPhone 14 (Safari) nicht – der Text wird unleserlich zusammengeschoben, während die Desktop-Ansicht korrekt dargestellt wird.

Hinweise:

  • Safari auf iOS hat bekannte Frontend-Rendering-Probleme aufgrund proprietärer Apple-Policies und WebKit-Engine-Einschränkungen
  • CSS-Media-Queries müssen möglicherweise Safari-spezifisch angepasst werden
  • Empfohlen wird, auf Android/Chrome zu testen und bei Theme-spezifischen Problemen den jeweiligen Theme-Support zu kontaktieren (Dawn: 60-Min Design Time, Prestige: Maestrooo-Support)

Status: Ursprüngliches Problem gelöst; Safari-spezifisches Rendering-Problem bleibt offen

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.

Guten Tag Leute,

ich möchte auf meiner Website auf der Startseite, Theme Dawn, den Rich Text ändern (Siehe Bild). Ich möchte dass der Zeilenabstand vom Text nicht so groß ist und direkt untereinander geschrieben wird.

Kann man die section-rich-text.css Datei so bearbeiten dass meine Vorstellung funktioniert?

Mit freundlichen Grüßen

D.Goncalves

@Danito du kannst in der section-rich-text.css folgendes ganz am Ende einfügen:

.rich-text__text {
  line-height:1.4;
}

Den Wert (1.4) kannst du entsprechende deiner Vorstellung anpassen.

Hoffe das entspricht dem, was du dir vorgestellt hast.

1 Like

Perfekt. Klappt super.

Ganz großen Dank!

Mit freundlichen Grüßen

D.Goncalves

Habe das beim mir ausprobiert. In der Desktop Ansicht funktiniert das super, schaut man es auf dem Handy Iphone 14 (safari, firefox) an, schiebt es den text so sehr zusammen dass er unleserlich wird. Hast Du ne Idee warum?

Theme: Prestige

danke alex

Hey Alle!

Danke für das Bild und an erster Stelle bieten die Theme Entwickler einen Support an wenn ihr Probleme mit dem Theme habt, wie das korrekte Rendering eurer RTE Texte im Frontend und Browser. Im Falle des Dawn Themes können wir ggf. :eyes: als Teil deiner 60-Min Design Time dass du mit einem Shopify Free Theme bekommst. Im Falle des Prestige Themes, bitte die Doku zuerst durchgehen und wenn das nicht hilft, dann Maestrooo über diese Form kontaktieren.

Um den Zeilenabstand im Dawn-Theme von Shopify für den Rich-Text zu ändern, kannst du die CSS-Datei section-rich-text.css bearbeiten und folgenden Code am Ende einfügen: .rich-text__text { line-height:1.4; }. Der Wert 1.4 kann nach Belieben angepasst werden, um den gewünschten Zeilenabstand zu erreichen. Dieser Code setzt somit den Zeilenabstand auf 1.4, was die Lesbarkeit verbessern sollte, ohne den Text unleserlich zu machen.

iPhone 14 und der Safari Browser

Frontend-Rendering Probleme auf Safari sind uns bekannt und das wurde hier in der Community schon oft gemeldet und besprochen. Es ist ein Problem der Proprietary Apple Policies.

Wenn es auf dem iPhone 14 zu Darstellungsproblemen kommt, liegt es somit an den spezifischen CSS-Einstellungen deines Safari Browser, die separat angepasst werden müssen​​. Es kann z. B. daran liegen, dass Safari oft unterschiedliche Standard-Styles hat als andere Browser, die über CSS-Media-Queries angepasst werden müssen. Hast du auf deinem iPhone es auf dem Chrome Browser getestet, oder besser, auf einem Android Handy?

Chrome oder andere nicht-Apple Browser werden sowieso auf iPhone nicht viel helfen denn auf iOS werden sie zu Safari Emulator aufgrund des WebKit-Engine umgewandelt, da diese Einschränkungen von Apple auf iOS vorgegeben werden.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd :hatching_chick: in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.