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

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.css gesteuert.
• 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 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 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).