Most visitors will open your funnel and website pages on a phone, so how a page looks on mobile matters just as much as how it looks on desktop. The Aesthetix CRM Page Builder lets you preview any page in a mobile view and make adjustments that apply only to phones, so you can keep your desktop layout while fine-tuning the experience for smaller screens. This article covers how to preview the mobile version of a page, how to adjust mobile visibility and spacing, and best practices for making sure your pages look right on every device.
The Page Builder is responsive by default, which means the desktop layout you build is automatically restructured to fit a phone screen. Before you publish, always check how the page renders on mobile so you can catch anything that needs attention.
Step 1: Open the funnel or website page you want to review in the Page Builder.
Step 2: At the top of the builder, switch the device view from desktop to mobile. This changes the canvas to a phone-width preview so you can see exactly how sections, columns, and elements stack and resize on a smaller screen.
Step 3: Scroll through the entire page in mobile view. Look for text that wraps awkwardly, images that overflow their container, buttons that are hard to tap, or spacing that feels too tight or too loose.
Many of the changes you make in mobile view apply only to the mobile version of the page, so you can refine the phone experience without disturbing your desktop layout. Any setting labeled as mobile-only takes effect when the page is viewed on a phone.
Step 4: Select the element you want to adjust while you are in mobile view. Open its settings to access properties such as font size, alignment, width, and spacing.
Step 5: Adjust font sizes for mobile. Headlines and body text that look balanced on desktop are often too large on a phone, so reduce them until they read comfortably on a narrow screen.
Step 6: Adjust spacing using padding and margin controls. Extra vertical space that looks good on desktop can create too much scrolling on mobile, while horizontal padding keeps content from running edge to edge. Tighten or loosen these values so each section feels balanced on a phone.
Step 7: Adjust alignment where needed. Content that is centered or offset on desktop may read better left-aligned or fully centered on mobile.
You can choose to show or hide specific elements based on the device. This lets you present a cleaner, more focused version of a page on mobile while keeping richer content on desktop.
Step 8: Select the element, section, or column you want to control, then open its visibility settings.
Step 9: Set the element to be hidden on mobile if it clutters the phone layout, or hidden on desktop if it is meant only for mobile visitors. Hidden elements still exist in the builder; they simply do not display on the device you have excluded.
Step 10: Use visibility settings to swap between a desktop-optimized element and a mobile-optimized version of the same content. For example, you might show a large hero image on desktop and a smaller, faster-loading image on mobile.
Once your adjustments are in place, confirm the page looks correct before it goes live.
Step 11: Use the preview option in the Page Builder to open the page as a visitor would see it, then view it on both desktop and mobile widths.
Step 12: When you are satisfied with how the page renders across devices, save and publish your changes.
Design with mobile in mind from the start. Since most traffic comes from phones, plan your layout so the most important content, offers, and calls to action appear near the top of the mobile view.
Keep text readable. Use generous font sizes for body copy and avoid long paragraphs that become walls of text on a narrow screen.
Make buttons easy to tap. Give calls to action enough size and spacing so they are simple to press with a thumb.
Watch your images. Confirm that images scale correctly, stay sharp, and do not overflow their containers on mobile.
Control spacing carefully. Reduce excess padding and margin so visitors do not have to scroll through empty space, but keep enough breathing room that sections stay distinct.
Hide non-essential elements. Remove decorative or secondary content from the mobile view to keep the page focused and fast.
Always test before publishing. Preview the live page on an actual phone whenever possible, since real devices can reveal issues the builder preview does not.
Do changes I make in mobile view affect the desktop version of my page? Mobile-specific settings such as mobile font size, spacing, and mobile visibility apply only to the phone view and do not change your desktop layout. Structural changes, such as adding or deleting an element, affect the page on all devices.
Why does my page look different on mobile than on desktop? The Page Builder is responsive and automatically restacks your desktop layout to fit a narrow screen. Sections and columns that sit side by side on desktop typically stack vertically on mobile, which can change spacing and the order in which content appears.
Can I hide an element on mobile but keep it on desktop? Yes. Select the element and use its visibility settings to hide it on mobile while keeping it visible on desktop, or the reverse. The element remains in the builder and only display changes.
My text or images look too large on mobile. How do I fix that? Switch to mobile view, select the element, and reduce its font size or width for mobile. These adjustments apply only to the phone view, so your desktop layout stays intact.
How can I be sure my page looks right on every device? Use the builder's device views and preview option to check both desktop and mobile widths, and whenever possible open the published page on a real phone before sharing it with visitors.
