Every landing page you build with EcomWize needs to look great on both desktop and mobile devices. The builder includes a desktop/mobile toggle that lets you switch between the two views instantly, so you can design and preview your page for each screen size without leaving the editor.
In the top toolbar of the builder, you will find two icons:
Monitor icon - Desktop view
Smartphone icon - Mobile view
Click either icon to switch the canvas to that view. The currently active view is highlighted.

When you switch between desktop and mobile, several aspects of your sections adapt automatically:
View | Canvas width |
Desktop | Full page width (matches your brand style max width) |
Mobile | Narrow width simulating a smartphone screen |
The canvas visually resizes to reflect the target screen size, giving you an accurate representation of how your page will look on each device.
Your brand style defines separate font sizes for desktop and mobile:
Heading sizes - Desktop headings are typically larger; mobile headings scale down for readability
Body text sizes - Body text may also adjust between desktop and mobile
Line heights - Automatically optimized for each screen size
These sizes are set in your brand style and apply globally across all sections.
Sections use responsive padding that adapts to the screen size:
Horizontal padding - Wider on desktop, narrower on mobile to maximize content space
Vertical padding - May adjust to keep sections proportional on smaller screens
Section spacing - The gap between sections can differ between views
Many sections adjust their internal layout based on the view:
Multi-column layouts on desktop often stack into a single column on mobile
Image and text side-by-side arrangements may become stacked
Grid layouts reduce the number of columns
Large hero images may adjust their aspect ratio
You can edit your page while in mobile view. All the same editing tools are available:
Click sections to select them
Edit text inline
Use the config panel to change properties
Drag and drop to reorder sections
Use the AI chatbox to rewrite content
Changes you make in mobile view affect the section across both views - there is no concept of "desktop-only" or "mobile-only" content. The section content is the same; only the visual presentation adapts.
Before publishing your page, we recommend the following workflow:
Review in desktop view
Scroll through your entire page in desktop view. Check that:
Text is readable and properly formatted
Images are properly sized and positioned
Sections flow together naturally
Call-to-action buttons are prominent
Switch to mobile view
Toggle to mobile view and scroll through the same page. Check that:
Text does not overflow or become too small
Images scale properly and are not cut off
Buttons are large enough to tap
Sections are not too tall or too short
The overall reading experience is comfortable
Use preview mode for a clean look
Toggle preview mode (eye icon in the toolbar) to hide all editing UI. This gives you the cleanest possible view of your page, exactly as visitors will see it. Test both desktop and mobile in preview mode.
Check text readability
Pay particular attention to heading sizes on mobile. If headings look too large or too small, adjust the mobile font sizes in your brand style.
The following brand style properties have separate desktop and mobile values:
Property | Desktop | Mobile |
Heading font sizes | H1-H6 desktop sizes | H1-H6 mobile sizes |
Body font sizes | P1-P3 desktop sizes | P1-P3 mobile sizes |
Horizontal padding | Desktop horizontal padding | Mobile horizontal padding |
Vertical padding | Desktop vertical padding | Mobile vertical padding |
You can adjust these in the Brand Style editor to fine-tune how your page appears on each device.
Brand style typography - Configure desktop and mobile font sizes.
Preview mode - Learn about preview mode for clean page previews.