More than 50% of emails are opened on mobile devices. Knak automatically optimizes your email layout for smaller screens. Use responsive controls when you need more control over how your content appears on mobile.
Use the Mobile Editing View to edit your mobile layout and see your changes in real time.
After making changes, use the Knak Preview to review your design. 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. Misalignment issues, such as images not aligning with text, can often be resolved by using stacked columns.
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 inside multi-column layouts or nested sections may appear smaller after your columns stack on mobile.
This happens because an image set to 100% width fills the width of its container when you set it. If that container is narrower than the full email, the image keeps that smaller size when the layout stacks on mobile.
For example, an image that fills a narrow column on desktop may not automatically expand when that column becomes full width on mobile.
Set a Separate Image Width for Mobile
Set a separate mobile width when you want the image to expand to fit the mobile layout.
Select the image block.
Open Image Settings in the right panel.
Find the image width setting.
Click the desktop/mobile split icon.
Set the mobile width to
100%.Adjust the alignment or padding for mobile as needed.
Why Does the Width Show 100% Before You Set a Mobile Width?
The original 100% value is based on the image's desktop container. Your image does not have a separate mobile width until you use the desktop/mobile split control.
For example:
An image at 100% width inside a 300-pixel-wide desktop column is sized to that 300-pixel container.
On mobile, the column may stack and expand to the full email width.
The image keeps its original size unless you set a separate mobile width.
Setting the mobile width to 100% tells the image to fill the wider mobile container.
This behavior is not specific to nested sections. You may see it in any layout where the image's desktop container is narrower than the available width on mobile. This commonly includes multi-column layouts and nested sections.
Tip: An image in a single full-width column may look the same without a separate mobile width. Its desktop container is already the full width of the email.
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.