How to Improve Mobile Spacing in Shopify (2026)

Key takeaways

• Many Shopify themes include separate mobile padding sliders inside section settings — check there first.
• Global spacing is often controlled by CSS custom properties, which Dawn sets from Theme settings > Layout.
• The most common issue is sections that have too much top/bottom padding on mobile, making the page feel sparse and slow to scroll.
• CSS media queries let you set completely different spacing values per screen size.

To fix mobile spacing in Shopify, open the theme editor’s phone preview and lower each section’s padding (or its mobile padding sliders, if your theme has them). For anything the sliders can’t reach, add a @media (max-width: 749px) CSS rule.

A section that looks balanced on a 1440px desktop monitor often has awkward padding on a 390px iPhone screen: either too much whitespace, or content crammed together.

Why mobile spacing goes wrong

Desktop designs are typically built at a larger scale — bigger padding, wider margins, more breathing room between elements. When those same pixel values apply on mobile, the proportion is off. 60px of top padding that looks elegant on desktop takes up about 7% of an iPhone screen’s height, and top and bottom padding together nearly double that.

Most modern Shopify themes account for this with responsive spacing, but not all themes are thorough about it, and theme customizations can introduce new spacing problems.

If a section doesn’t belong on phones at all, see how to hide content on mobile in Shopify.

Method 1 — Section padding settings in the Theme Editor

The fastest fix for section-level spacing.

Step 1 — Open the Theme Editor. Go to Online Store → Themes → Customize.

Step 2 — Switch to mobile preview. Click the phone icon at the top. This helps you spot which sections have spacing problems.

Step 3 — Select the problem section. Click it in the left sidebar or directly on the canvas.

Step 4 — Look for padding controls. In the right settings panel, scroll down to find:

• “Top padding” / “Bottom padding” sliders
• “Padding top (mobile)” / “Padding bottom (mobile)” sliders
• “Section spacing”

When separate mobile sliders exist, adjust them independently of desktop. This is the cleanest approach.

Step 5 — Check padding on all sections. Sections can stack awkwardly when two sections in a row both have 60px bottom/top padding. Reducing one of them often fixes the visual gap.

For the basics of padding and margin, see how to change padding and margin in Shopify.

Method 2 — CSS media queries for custom spacing

When the Theme Editor doesn’t have mobile-specific controls, CSS gives you precise control.

Step 1 — Duplicate your theme. Go to Online Store → Themes, click the three-dot menu (…) next to your theme, then Duplicate. Make the change on the copy.

Step 2 — Identify the element. Right-click the over-spaced section → Inspect → find the class name (e.g., .section-features, .page-width).

Step 3 — Open your CSS file. On the duplicate, click the three-dot menu (…), then Edit code, and open assets/base.css.

Step 4 — Add a mobile-specific rule:

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

Adjust the values until the spacing feels right. A good rule of thumb: mobile padding should be roughly half of desktop padding for most section types.

CSS custom properties for global spacing

Modern Shopify themes (especially Dawn and its derivatives) use CSS custom properties to control spacing globally. In Dawn these variables are set from Theme settings > Layout (grid spacing sliders) and output in theme.liquid, so change the sliders first. The output looks like this:

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

Changing these values affects spacing across your entire theme at once. This is more efficient than targeting individual sections, but be careful — a global change can have unintended effects across many pages.

Method 3 — Fudge for spacing adjustments

If you want to adjust spacing across multiple sections without hunting for class names or touching CSS variables, describe the change to Fudge, the AI operator for Shopify stores. Its store editor turns plain English into theme CSS:

“Reduce the top and bottom padding on all sections by about 30% on mobile screens.”

Or more specifically:

“The hero section has too much padding below it on mobile — bring the next section closer.”

Fudge generates the CSS changes as a draft for your review, so you can scroll the preview on your phone before anything is published. Layouts that break on small screens are also among the things it looks for when you ask it where mobile shoppers drop off.

Common mobile spacing problems and fixes

Too much space between sections. Usually caused by both sections having large top and bottom padding. Reduce bottom padding on the first section or top padding on the second.

Text too close to the screen edge. Sections need horizontal padding on mobile. Look for padding-left/padding-right or a .page-width container class that controls horizontal margins.

Images with no margin below them. When images and text stack, a gap between them helps readability. Add margin-bottom to image containers on mobile.

Font size too large for mobile. Large desktop headings can force awkward line breaks on mobile. Use media queries to reduce font-size on headings at small breakpoints.

To change the order sections stack in on phones, see how to reorder your mobile layout in Shopify.

Testing mobile spacing properly

The Theme Editor mobile preview is useful but not perfectly accurate. For real testing:

• Chrome DevTools — F12 → phone icon → select iPhone or Android preset
• Real device testing — nothing beats checking on your own phone
• BrowserStack — test on multiple real devices if you want to cover a range of screen sizes

Common mobile sizes to test: 375px (iPhone SE), 390px (iPhone 14/15), 412px (Android), 768px (iPad).

FAQ