More than 50% of emails are opened on mobile devices. Your design must remain clear on smaller screens. The email builder automatically optimizes layouts for mobile. You can also adjust responsive settings for greater control.
Use Mobile Editor View to see responsive changes while editing.
Review your design in the Knak Preview.
Run Email Testing to complete quality assurance (QA) before syncing your email.
Use the Mobile Editor View
Edit your email while viewing the mobile layout.
Open your asset in the Email Builder.
Click the Mobile View toggle at the top of the builder.
Continue editing your content.
Responsive settings update in real time. Use this view to quickly adjust spacing, alignment, and text size.
Control Column Stacking
Multi-column rows stack automatically on mobile. The right column appears below the left column. This keeps content readable on smaller screens.
You can disable this behavior if needed.
Select a row with multiple columns.
Open the Row Settings panel.
Scroll to the bottom.
Toggle Do Not Stack on Mobile.
Tip: Stacked columns create a clean vertical layout. Use horizontal columns on mobile only when necessary.
Reverse Column Order on Mobile
Stacked columns display in this order by default:
Left column
Right column
You can reverse the order if your design requires it.
Select the row.
Open Row Settings.
Enable Reverse Column Order on Mobile.
The right column appears first on mobile.
Optimize Images for Mobile
Images can display at full width on mobile devices. This improves visibility on small screens.
Select an image block.
Open Image Settings in the right panel.
Adjust alignment or padding for mobile.
Hide Content on Mobile
Hide content blocks that are unnecessary on smaller screens. This includes text, buttons, images, or entire rows.
Select a content block or row.
Scroll to the bottom of the settings panel.
Toggle Hide on Mobile.
Undo by clicking the X button beside the Hide On (Mobile/Desktop) feature.
Check the Result
You can confirm the change in two ways.
Option 1: Check in the Builder
Switch between Desktop and Mobile editing modes in the builder.
Review how the layout updates directly in the editor.
Option 2: Use Preview
Click Preview.
Toggle between Desktop and Mobile views to confirm the final layout.Hidden elements will only appear in desktop view.
Example: Hide spacer blocks that add extra height on mobile.
Set Mobile-Specific Values
Some properties support separate values for desktop and mobile. The builder defaults to desktop view. Switch to Mobile Editor View to adjust mobile values while seeing the layout update.
Available Mobile Settings
Element | Mobile Settings |
Text | Size, Alignment, Padding |
Image | Alignment, Padding |
Section | Padding, Background Position, Background Size |
Column | Padding |
Button | Alignment, Padding, Font Size |
Spacer | Height |
Social | Alignment |
Divider | Alignment |
Use these settings to improve spacing and readability on smaller screens.
Mobile Design Best Practices
Use Mobile Editor View to review responsive changes live.
Check mobile preview often during the build.
Use stacked columns for easier reading.
Keep layouts simple and vertical.
Remove unnecessary spacing.
Hide non-essential elements on mobile.
These adjustments help your email stay clear on any device.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.