Mobile Responsiveness

Mobile Responsiveness

Kombai supports mobile responsiveness for HTML email code. We provide the following features as part of our responsiveness settings:

Customize Responsive Behavior

Kombail lets you add custom responsive behavior to the code. If this feature is turned on, we add a media query in the code and let you define how the email is rendered on smaller screens.

Customise Responsive Behavior turned on

Breakpoint Width

Breakpoint Width is the width below which the defined responsive behavior will be enabled. We use 480px as the default breakpoint. However, you can change it as per your preference.

Breakpoint Width

Email Margin

Email Margin is the width between the content and the email’s outermost border. We use 4px as the default value. However, you can specify your own margin for both sides: left, and right on devices below the breakpoint.

Email Margin

Font Size Overrides

We let you define font sizes for devices below the breakpoint. When email renders on a device smaller than the breakpoint, the new font size will override the default one.

Font size overrides screenshot

Make Email-content Fluid (Recommended for single-column layouts)

Fluid content means that your content will adapt to the screen size of the reader. If Make Email-content Fluid is enabled in settings, Kombai will optimize the code to make your content adapt itself to the widths of the devices below the specified breakpoint.

As a result, images inside the email will be resized, and the text will be wrapped according to the width of the device.

💡

Note: For best experience, we recommend you to turn on Make Email-content Fluid along with the Stack Elements in Columns(see the example in the next section).

Stack Elements in Columns (Recommended for two or three-column layouts)

If Stack Elements in Columns is enabled, all two and three-column layouts in your email will be stacked on top of one another below the breakpoint device(see the example below).