Wichtige Erkenntnisse
- Viele Shopify-Themes enthalten separate Schieberegler für das Mobile Padding in den Abschnitteinstellungen – suchen Sie dort zuerst.
- Globale Abstände werden häufig über CSS-Custom-Properties in der Datei
assets/base.cssgesteuert.- Das häufigste Problem sind Abschnitte mit zu viel Padding oben/unten auf Mobilgeräten, wodurch die Seite leer wirkt und das Scrollen mühsam wird.
- Mit CSS Media Queries können Sie völlig unterschiedliche Abstandswerte pro Bildschirmgröße festlegen.
Abstandsprobleme auf Mobilgeräten gehören zu den häufigsten Design-Beschwerden bei Shopify. Ein Abschnitt, der auf einem 1440px Desktop-Monitor perfekt ausbalanciert aussieht, hat auf einem 390px iPhone-Display oft unschöne Abstände. Entweder lässt zu viel Whitespace die Seite dünn und unfertig wirken, oder der Inhalt ist ohne Platz zum Atmen zusammengequetscht.
Dieser Guide zeigt Ihnen, wie Sie Abstände auf Mobilgeräten analysieren und korrigieren.
Warum mobile Abstände oft nicht passen
Desktop-Designs werden in der Regel in einem größeren Maßstab erstellt – mehr Padding, breitere Margins, mehr Freiraum zwischen den Elementen. Wenn dieselben Pixelwerte auf Mobilgeräte angewendet werden, stimmt die Proportion nicht mehr. 60px oberes Padding, das auf dem Desktop elegant wirkt, nimmt auf einem Smartphone 15 % der Bildschirmhöhe ein.
Die meisten modernen Shopify-Themes berücksichtigen dies durch Responsive Spacing, aber nicht alle Themes sind dabei gründlich, und Theme-Anpassungen können neue Abstandsprobleme verursachen.
Methode 1 — Einstellungen für das Abschnitts-Padding im Theme Editor
Die schnellste Lösung für Abstände auf Abschnittsebene.
Schritt 1 — Öffnen Sie den Theme Editor. Gehen Sie zu Onlineshop → Themes → Anpassen.
Schritt 2 — Wechseln Sie zur mobilen Vorschau. Klicken Sie auf das Smartphone-Symbol oben. So erkennen Sie sofort, welche Abschnitte Abstandsprobleme haben.
Schritt 3 — Wählen Sie den betroffenen Abschnitt aus. Klicken Sie ihn in der linken Seitenleiste oder direkt im Design-Fenster an.
Schritt 4 — Suchen Sie nach den Padding-Reglern. Scrollen Sie im rechten Einstellungsbereich nach unten zu:
- Schieberegler für „Padding oben“ / „Padding unten“
- Schieberegler für „Padding oben (mobil)“ / „Padding unten (mobil)“
- „Abschnittsabstand“
Wenn separate Regler für Mobilgeräte vorhanden sind, passen Sie diese unabhängig vom Desktop an. Dies ist der sauberste Ansatz.
Schritt 5 — Überprüfen Sie das Padding bei allen Abschnitten. Abschnitte können unschön wirken, wenn zwei aufeinanderfolgende Abschnitte jeweils 60px Padding (unten/oben) haben. Das Reduzieren eines dieser Werte behebt oft die visuelle Lücke.
Methode 2 — CSS Media Queries für individuelle Abstände
Wenn der Theme Editor keine mobil-spezifischen Steuerelemente bietet, ermöglicht CSS eine präzise Kontrolle.
Schritt 1 — Element identifizieren. Rechtsklick auf den Abschnitt mit zu viel Abstand → Untersuchen (Inspect) → Klassennamen finden (z. B. .section-features, .page-width).
Schritt 2 — CSS-Datei öffnen. Onlineshop → Themes → Aktionen → Code bearbeiten → assets/base.css.
Schritt 3 — Eine mobil-spezifische Regel hinzufügen:
@media (max-width: 767px) {
.section-features {
padding-top: 32px;
padding-bottom: 32px;
}
}Passen Sie die Werte an, bis der Abstand stimmig wirkt. Eine Faustregel: Das mobile Padding sollte bei den meisten Abschnittstypen etwa die Hälfte des Desktop-Paddings betragen.
Duplizieren Sie immer Ihr Theme, bevor Sie Änderungen am Code vornehmen.
CSS-Custom-Properties für globale Abstände
Moderne Shopify-Themes (insbesondere Dawn und dessen Ableger) nutzen CSS-Custom-Properties, um Abstände global zu steuern. Suchen Sie in der base.css nach Variablen wie diesen:
:root {
--page-width: 1200px;
--grid-mobile-horizontal-spacing: 10px;
--grid-mobile-vertical-spacing: 10px;
}Das Ändern dieser Werte wirkt sich auf das gesamte Theme aus. Dies ist effizienter, als jeden Abschnitt einzeln anzusteuern, aber Vorsicht: Eine globale Änderung kann unerwünschte Auswirkungen auf vielen Seiten haben.
Methode 3 — Fudge für Abstandsanpassungen
Wenn Sie Abstände über mehrere Abschnitte hinweg anpassen möchten, ohne nach Klassennamen zu suchen oder CSS-Variablen zu bearbeiten, beschreiben Sie die Änderung einfach gegenüber Fudge:
„Reduziere das Padding oben und unten bei allen Abschnitten auf Mobilgeräten um etwa 30 %.“
Oder spezifischer:
„Der Hero-Abschnitt hat mobil zu viel Platz darunter – rücke den nächsten Abschnitt näher heran.“
Fudge generiert die CSS-Änderungen als Entwurf zur Überprüfung.
Häufige Probleme mit mobilen Abständen und Lösungen
Zu viel Platz zwischen Abschnitten. Meist verursacht durch große Paddings oben und unten bei beiden Abschnitten. Reduzieren Sie das untere Padding beim ersten oder das obere Padding beim zweiten Abschnitt.
Text zu nah am Bildschirmrand. Abschnitte benötigen auf Mobilgeräten horizontales Padding. Suchen Sie nach padding-left/padding-right oder einer Container-Klasse wie .page-width, die die horizontalen Ränder steuert.
Bilder ohne Abstand darunter. Wenn Bilder und Text untereinander stehen, hilft ein Abstand der Lesbarkeit. Fügen Sie auf Mobilgeräten margin-bottom zu Bild-Containern hinzu.
Schriftgröße zu groß für mobile Geräte. Große Desktop-Überschriften können auf dem Smartphone zu unschönen Zeilenumbrüchen führen. Nutzen Sie Media Queries, um die font-size für Überschriften bei kleinen Breakpoints zu reduzieren.
Mobile Abstände richtig testen
Die mobile Vorschau im Theme Editor ist nützlich, aber nicht 100%ig genau. Für echtes Testing:
- Chrome DevTools — F12 → Smartphone-Symbol → iPhone- oder Android-Preset wählen
- Test auf echten Geräten — Nichts geht über den Check auf dem eigenen Handy
- BrowserStack — Testen Sie auf verschiedenen echten Geräten, wenn Sie eine Vielzahl von Bildschirmgrößen abdecken wollen
Gängige mobile Größen zum Testen: 375px (iPhone SE), 390px (iPhone 14/15), 412px (Android), 768px (iPad).
