Abstand zwischen einzelnen Abschnitten verkleinern (mobile) // Palo Alto

Topic summary

Ziel: Mobile Abstände und Schriftgrößen im Shopify-Theme „Palo Alto“ anpassen, insbesondere der große Abstand im Abschnitt „Bekannt aus“.

Lösungen und Hinweise:

  • Globaler Abstand: In der Datei css-variables.liquid den CSS-Variablenwert --gutter (Standard ca. 60px) reduzieren, z. B. auf 20–30px. Hinweis: --gutter ist ein globaler Spalten-/Abstandswert und wirkt auch auf die Desktop-Ansicht.
  • Selektiver (mobil/sektionsweise): Eigene mobile Werte pro Sektion via CSS/Media Queries möglich; mehr Aufwand, verhindert aber unerwünschte Nebeneffekte.

Ergebnisse:

  • Der Threadstarter stellte --gutter auf 30px; mobile und Desktop-Darstellung passen für ihn.
  • Textgröße im „Bekannt aus“-Bereich: In theme.css am Ende eine Regel für .press__item p mit gewünschter font-size ergänzen; falls nötig in theme.dev.css. Vor Änderungen: Theme-Kopie/Sicherung anlegen. Zusätzliche Links zu Backups, Theme-Support und Experten wurden geteilt.

Offen/aktuellste Entwicklung:

  • Ein weiterer Nutzer findet die Datei css-variables.liquid im (anderen) Standard-Theme nicht und bittet um Pfad/alternative Bezeichnung bzw. Screenshot. Dafür steht eine Antwort noch aus.
Summarized with AI on January 6. AI used: gpt-5.

Hey Finer, danke für deine Hilfe! Kann ich da nochmal was nachfragen? Ich suche im Code-Editor nach diesen css.variables.liquid, aber kann es nicht finden. Ich benutzt ein Standard Theme von Shopify, aber dort ist nichts von diesem ..liquid. Kannst du eventuell nochmal per Bild zeigen, wo er sich befindet und vielleicht, ob es hierfür eine andere Bezeichnung gibt? Auf eine Antwort freue ich mich sehr! MfG