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 Abschnittsebene.

Schritt 1 – Öffne den Theme-Editor. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2 – Wechsle zur mobilen Vorschau. Klicke oben auf das Smartphone-Symbol. So erkennst du, welche Abschnitte Abstands-Probleme haben.

Schritt 3 – Wähle den Problem-Abschnitt aus. Klicke ihn in der linken Seitenleiste oder direkt auf dem Canvas an.

Schritt 4 – Suche nach Padding-Einstellungen. Scrolle im rechten Einstellungsfenster nach unten, um Folgendes zu finden:

• Schieberegler für „Top padding“ / „Bottom padding“ (Innenabstände oben/unten)
• Schieberegler für „Padding top (mobile)“ / „Padding bottom (mobile)“
• „Section spacing“ (Abschnittsabstände)

Wenn es separate mobile Regler gibt, passe diese unabhängig von der Desktop-Version an. Das ist die sauberste Lösung.

Verwandt: Ein Shopify-Theme schneller machen.

Verwandt: Mobiles Layout in Shopify neu anordnen.

Verwandt: Abstände in Shopify bearbeiten.

Verwandt: Padding und Margin in Shopify ändern.

Schritt 5 – Überprüfe das Padding bei allen Abschnitten. Es kann optisch unschön wirken, wenn zwei aufeinanderfolgende Abschnitte jeweils 60px Padding oben und unten haben. Wenn du eines davon reduzierst, verschwindet oft die störende visuelle Lücke.

Methode 2 — CSS Media Queries für individuelle Abstände

Wenn der Theme-Editor keine mobilspezifischen Einstellungen bietet, gibt dir CSS die genaue Kontrolle.

Schritt 1 – Identifiziere das Element. Rechtsklick auf den Abschnitt mit zu viel Abstand → Untersuchen (Inspect) → finde den Klassennamen (z. B. .section-features, .page-width).

Schritt 2 – Öffne deine CSS-Datei. Onlineshop → Themes → Aktionen (oder die drei Punkte) → Code bearbeiten → assets/base.css.

Schritt 3 – Füge eine mobilspezifische Regel hinzu:

@media (max-width: 767px) {
    .section-features {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

Passe die Werte an, bis sich die Abstände richtig anfühlen. Eine gute Faustregel: Das mobile Padding sollte bei den meisten Abschnittsarten etwa die Hälfte des Desktop-Paddings betragen.

Dupliziere immer dein Theme, bevor du Änderungen am Code vornimmst.

CSS-Custom-Properties für globale Abstände

Moderne Shopify-Themes (insbesondere Dawn und dessen Ableger) verwenden CSS Custom Properties, um Abstände global zu steuern. Halte in der base.css nach solchen Variablen Ausschau:

:root {
    --page-width: 1200px;
    --grid-mobile-horizontal-spacing: 10px;
    --grid-mobile-vertical-spacing: 10px;
}

Das Ändern dieser Werte wirkt sich sofort auf die Abstände in deinem gesamten Theme aus. Das ist effizienter als einzelne Abschnitte gezielt anzupassen, aber Vorsicht: Eine globale Änderung kann auf vielen Seiten unbeabsichtigte Folgen 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