Key takeaways
- Many Shopify themes include separate mobile padding sliders inside section settings — check there first.
- Global spacing is often controlled via CSS custom properties in
assets/base.css.- 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.
Spacing problems on mobile are one of the most common Shopify design complaints. A section that looks perfectly balanced on a 1440px desktop monitor often has awkward padding when viewed on a 390px iPhone screen. Either too much whitespace makes the page feel thin and unfinished, or content is crammed together without room to breathe.
This guide shows you how to diagnose and fix spacing on mobile.
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 15% of a mobile screen’s height.
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.
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.
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 — Identify the element. Right-click the over-spaced section → Inspect → find the class name (e.g., .section-features, .page-width).
Step 2 — Open your CSS file. Online Store → Themes → Actions → Edit code → assets/base.css.
Step 3 — Add a mobile-specific rule:
@media (max-width: 767px) {
.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.
Always duplicate your theme before making code changes.
CSS custom properties for global spacing
Modern Shopify themes (especially Dawn and its derivatives) use CSS custom properties to control spacing globally. Look for variables like these in base.css:
: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:
“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.
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.
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).
