What Are Responsive Options?
Responsive options allow you to control how your assets appear on different screen sizes.
You can set different design values for desktop and mobile views. This helps ensure your email or landing page looks clear and readable on every device.
With responsive options, you can adjust:
Font size
Padding and spacing
Text alignment
Section visibility
Layout behavior
These settings allow you to optimize your design for smaller mobile screens.
How to Add Responsive Options
Responsive settings appear inside the style panel when editing a component.
Steps to Enable Responsive Settings
Select a component in the builder.
Look for the responsive icon that shows a monitor and mobile device.
Click the icon.
Set different values for desktop and mobile view.
Once enabled, you can customize settings separately for each device type.
You can apply responsive values to:
Padding
Font size
Alignment
Visibility of sections
Always preview your design to confirm how it appears on mobile. Use Mobile View Editing to see adjustments live while editing.
Mobile Breakpoints Explained
A mobile breakpoint is a screen width that triggers a layout change. It tells your design when to switch between desktop and mobile layouts.
Screens narrower than the breakpoint use the mobile layout.
Screens wider than the breakpoint use the desktop layout.
In most designs, the desktop layout shows columns side-by-side. The mobile layout stacks columns vertically for easier reading.
Breakpoint vs. Width
In Knak, you can configure both a Width and a Breakpoint. Each setting controls a different part of your design.
Setting | Description |
Width | The maximum width of your email or landing page. |
Breakpoint | The screen width where the layout switches between desktop and mobile views. |
Learn More in our Understanding Mobile Breakpoints document.
Troubleshooting
Plain Text Appears for Hidden Responsive Content
You may notice that hidden sections still appear in the plain text version of your email after syncing to your marketing automation platform (MAP).
This behavior is expected.
Plain text generates content for every component in the email, including sections hidden for mobile or desktop.
How to Avoid Duplicate Plain Text
To reduce duplicate text in the plain text version:
Use responsive styling within a single section.
Adjust font size, padding, and alignment responsively.
Avoid creating duplicate sections when possible.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.