Best Practices for Mobile + Spacing
What You’ll Learn
📱 How to optimize Interactive Spaces for mobile users 📏 How to use spacing settings for a cleaner layout 🔍 Common issues and how to fix them
1. Why Mobile Optimization Matters
Interactive Spaces are highly visual and spatial — but mobile screens are small. To ensure a great experience:
Keep interactive points away from the very edges
Avoid placing touch points too close together
Test your layouts in both desktop and mobile preview modes
💡 A point that looks perfect on desktop may overlap other elements on mobile.
2. Use the Built-In Spacing Controls
In the Interactive Space settings, you’ll find these options:
Top/Bottom Padding: Add breathing room above or below your space
Point Margin: Set consistent spacing around your interactive blocks
Mobile Adjustments: Use the mobile preview to manually adjust X/Y coordinates if necessary
3. Choose the Right Background Size
Your background image affects how your space renders on different screens. Stick to a 16:9 aspect ratio to keep things balanced:
✅ 1280×720
✅ 1920×1080 (Recommended for crisp displays)
✅ 2560×1440 or 3840×2160 for ultra high-res setups
⚠️ Avoid portrait or square backgrounds. These distort the layout on mobile and tablet.
4. Optimize Point Placement
Here are tips to improve the tap experience:
Use even spacing between touch points
Avoid stacking more than 3–4 points vertically
Preview every space on mobile, tablet, and desktop
Adjust X/Y coordinates using the block settings for precise control
5. Test Scroll and Load Behavior
Make sure your interactive page:
Loads quickly (optimize background image file size)
Doesn’t force users to scroll horizontally on mobile
Keeps all call-to-action points visible within the safe area
🧪 Always preview on real devices before going live.
Need Help?
💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6
📧 Email us at: support@openspaces.design
💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website
Last updated