Introduction
Most web traffic today comes from mobile devices, so it’s important to make sure your site looks and performs well on smaller screens. The Swiftwebsites.ai builder automatically scales your design for mobile, but you also have the option to customize layouts, hide or show elements, and create mobile-only sections.
Switching to Mobile View
In the builder toolbar, click the phone icon to switch to mobile view.
By default, your desktop design automatically scales down for mobile.
For global styling (like fonts), you can adjust them specifically for mobile under Global Styling settings.
Adjusting Spacing and Layout
Add Spacers or other widgets to fine-tune margins and spacing on mobile.
Any widget or block with a small phone icon means it only applies to mobile view.
These adjustments won’t appear on the desktop version.
Creating Mobile-Only Sections
To create a section that looks different on mobile:
Copy the section from desktop.
Hide the original section from mobile and tablet.
Customize the copied version with the mobile-only tag.
This allows you to completely redesign a section for mobile users without changing how it looks on desktop.
Hiding and Showing Elements
You can hide blocks or widgets from mobile, tablet, or desktop individually.
This is useful for simplifying navigation or removing complex elements that don’t translate well to smaller screens.
Use this feature to focus mobile visitors on the most important content and CTAs.
Stretch and Column Options
Columns can be set to stretch or remain compact.
Stretching may work for small text or simple layouts, but compact columns usually maintain better readability.
Test different layouts in mobile preview to decide what looks best.
Tablet Editing
Similar to mobile, you can switch to tablet view and adjust designs independently.
Hide or show specific blocks just for tablets to fine-tune the experience.
Best Practices
Keep mobile layouts simple and clean. Remove anything that clutters the screen.
Use mobile-only sections for content that needs a different design.
Always preview your changes on both desktop and mobile before saving.
Make CTAs large and easy to tap.
Hide secondary or less important content for mobile visitors.
Quick Workflow Recap
Switch to mobile view using the phone icon.
Adjust fonts, margins, and spacing through Global Styling or Spacers.
Use mobile-only sections to design content differently for smaller screens.
Hide or show elements as needed for mobile or tablet.
Preview changes across all devices, then Save.