So verbessern Sie mobile Abstände in Shopify (2026)

Das Wichtigste in Kürze

• Viele Shopify-Themes enthalten separate Mobile-Padding-Regler in den Abschnittseinstellungen – sieh dort zuerst nach.
• Globale Abstände werden oft über CSS Custom Properties in der assets/base.css gesteuert.
• Das häufigste Problem sind Abschnitte mit zu viel Padding oben/unten auf mobilen Geräten. Das lässt die Seite leer wirken und verzögert das Scrollen.
• Mit CSS Media Queries kannst du komplett unterschiedliche Abstandswerte je Bildschirmgröße festlegen.

Abstandsprobleme auf mobilen Geräten gehören zu den häufigsten Beschwerden beim Shopify-Design. Ein Abschnitt, der auf einem 1440px Desktop-Monitor perfekt ausbalanciert aussieht, hat auf dem 390px Display eines iPhones oft unpassende Abstände. Entweder lässt zu viel Whitespace die Seite dünn und unfertig wirken, oder die Inhalte sind dicht aneinandergequetscht und haben keinen Raum zum Atmen.

Dieser Leitfaden zeigt dir, wie du Abstandsprobleme auf mobilen Geräten erkennst und behebst.

Warum mobile Abstände oft nicht passen

Desktop-Designs sind in der Regel großzügiger angelegt – mehr Padding, breitere Margins, mehr Freiraum zwischen den Elementen. Wenn dieselben Pixelwerte auf dem Handy angewendet werden, stimmt das Verhältnis nicht mehr. 60px Padding oben, die auf dem Desktop elegant aussehen, nehmen auf dem Mobile-Screen 15 % der Displayhöhe ein.

Die meisten modernen Shopify-Themes berücksichtigen dies durch Responsive Spacing, aber nicht alle Themes sind dabei konsequent, und individuelle Theme-Anpassungen können neue Probleme beim Abstand verursachen.

Passend dazu: Inhalte auf Mobilgeräten in Shopify ausblenden.

Methode 1 — Einstellungen für das Abschnitts-Padding im Theme Editor

Die schnellste Lösung für Abstände auf Sektionsebene.

Schritt 1 — Theme-Editor öffnen. Gehen Sie zu Onlineshop → Themes → Customizer.

Schritt 2 — Zur Mobile-Vorschau wechseln. Klicken Sie auf das Smartphone-Icon oben. So sehen Sie sofort, welche Sektionen Probleme mit den Abständen haben.

Schritt 3 — Die betroffene Sektion auswählen. Klicken Sie sie in der linken Seitenleiste oder direkt im Vorschaubereich an.

Schritt 4 — Nach Padding-Einstellungen suchen. Scrollen Sie im rechten Einstellungs-Panel nach unten zu:

• Reglern für „Top padding“ / „Bottom padding“
• Reglern für „Padding top (mobile)“ / „Padding bottom (mobile)“
• „Section spacing“

Wenn separate Schieberegler für Mobile existieren, passen Sie diese unabhängig vom Desktop an. Das ist die sauberste Lösung.

Passend dazu: Shopify Theme schneller machen.

Passend dazu: Mobile Layout in Shopify umstellen.

Passend dazu: Abstände in Shopify bearbeiten.

Passend dazu: Padding und Margin in Shopify ändern.

Schritt 5 — Padding bei allen Sektionen prüfen. Sektionen können unvorteilhaft wirken, wenn zwei aufeinanderfolgende Abschnitte jeweils 60px Padding (oben/unten) haben. Die Reduzierung bei einer der Sektionen löst oft das Problem der visuellen 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 perfekt. Für richtiges Testen:

• Chrome DevTools — F12 → Smartphone-Icon → iPhone- oder Android-Preset auswählen
• Testen auf echten Geräten — Nichts schlägt den Test auf dem eigenen Handy
• BrowserStack — Auf mehreren echten Geräten testen, wenn du eine ganze Bandbreite von Bildschirmgrößen abdecken willst

Typische mobile Größen zum Testen: 375px (iPhone SE), 390px (iPhone 14/15), 412px (Android), 768px (iPad).

FAQ