Overview
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.Switching between views
In the top toolbar of the builder, you will find two icons:- Monitor icon — Desktop view
- Smartphone icon — Mobile view
What changes between views
When you switch between desktop and mobile, several aspects of your sections adapt automatically:Canvas width
| View | Canvas width |
|---|---|
| Desktop | Full page width (matches your brand style max width) |
| Mobile | Narrow width simulating a smartphone screen |
Typography
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
Padding and spacing
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
Layout changes
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
Layout responsiveness is built into each section’s design. You do not need to manually configure separate desktop and mobile layouts — the sections handle this automatically based on your brand style settings.
Editing in mobile view
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
Testing your page before publishing
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.
Responsive brand style properties
The following brand style properties have separate desktop and mobile values:| Property | Desktop | Mobile |
|---|---|---|
| Heading font size | headingSize | headingSizeMobile |
| Body font size | bodySize | bodySizeMobile |
| Horizontal padding | paddingHorizontal | paddingHorizontalMobile |
| Vertical padding | paddingVertical | paddingVerticalMobile |