Mobile View Editing provides a mobile-first workflow inside the editor. You can edit and preview your design in the same place. This helps ensure your email looks correct on phones before you send it.
Why Use Mobile View Editing?
Most email recipients open messages on mobile devices. Mobile View Editing helps you design for that experience.
Benefits include:
See how content stacks and flows on smaller screens.
Edit layouts without switching between views.
Catch spacing or alignment issues early.
Preview the exact mobile experience while editing.
Demo Video
How to Edit in Mobile View
1. Switch to Mobile View
Open your email in the editor.
Click the Mobile icon in the top toolbar.
Your canvas switches from desktop layout to mobile layout.
Result: Your design resizes and stacks to mimic a phone screen.
2. Select an Element
Click any text block, image, or section in the mobile canvas.
Edit the content directly.
Changes update live in the mobile preview.
3. Make Your Edits
Update content directly inside the mobile layout.
Common edits include:
Update text content
Replace or adjust images
Modify padding or spacing
Adjust alignment for smaller screens
Use these adjustments to improve readability on mobile devices.
4. Switch Between Desktop and Mobile
You can compare layouts at any time.
Click the Desktop or Mobile icon in the toolbar.
Toggle between both views.
All edits save automatically and apply across both views.
Understanding Mobile and Desktop Visibility
You can control whether a section appears on mobile or desktop using Responsive Options.
Check a Section’s Visibility
Select the section.
Open Responsive Options in Section Attributes.
Check the Hide on setting.
Understand the Icons
Mobile icon — Hides the section on mobile.
Desktop icon — Hides the section on desktop.
No device selected — Shows the section on both mobile and desktop.
Find Hidden Content in the Layer Browser
The Layer Browser shows an icon beside content that is only visible in one view. The icon shows where the content is visible.
Mobile icon — The content is visible on mobile. It is hidden on desktop.
Desktop icon — The content is visible on desktop. It is hidden on mobile.
No icon — The content is visible on both mobile and desktop.
For example, if you hide a section on desktop, a mobile icon appears beside that section in the Layer Browser.
Edit a Hidden Section
A hidden section may not appear in your current view. Switch between the mobile and desktop views at the top of the editor to find and edit the section.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.