White Label End User Guide
Markdown FilesDeveloper DocsDeveloper Login
  • Quick Start Guide for Content Builder
  • Builders
    • Design Builder Overview
    • Page Builder
      • Internal Links for Page Navigation
  • Manage Files
    • File Manager
      • How to Move Files
  • Design Tools
    • Undo, Redo, and History
    • Mobile Optimization Options
    • Mobile Design Mode
    • Configuring Settings
    • Borders
    • Padding
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Dynamic Content
    • Display Conditions
  • Content Blocks
    • Table
    • Forms
      • Form Layout Customization
    • Video
    • Icons
    • GIF Animations and Animated Stickers
    • Custom HTML
    • Paragraph and List Content Blocks
    • Titles
    • Menus
    • Images
    • Dividers and Spacers
    • Letter and Paragraph Spacing
  • Reuse Content
    • Saved Rows
    • Hosted Saved Rows
      • Glossary of Common Terms
    • Synced Rows
  • Structure Content
    • Row vs. Content Block Selection
    • Row Properties
    • Column Management
  • Design for any Language
    • Multi-language Templates
  • Preview Options
    • Preview Designs
    • Dark Mode Preview
  • Team Collaboration
    • Co-editing in the Builder
    • Content Locking
  • AI Tools for Content Creation
    • Apply a Brand Tone
    • AI-Generated Images
    • AI-Generated Metadata
    • Bulk Generate Alt Text with AI
    • AI Writing Assistant
    • Automatic Translations
Powered by GitBook

GitHub

  • Edit on GitHub
On this page

Was this helpful?

Export as PDF
  1. Design Tools

Mobile Optimization Options

Last updated 1 year ago

Was this helpful?

Overview

The importance of mobile-friendly designs can't be overstated. While the builder's default settings aim for universal usability by automatically stacking columns on mobile devices, you may want to fine-tune this behavior. This section outlines the features designed to optimize the mobile responsiveness of your emails and landing pages.

Desktop vs. Mobile Preview

The default vertical stacking is widely supported. However, some email clients that lack CSS support will default to the desktop layout.

Customizable Mobile Behavior

Do Not Stack on Mobile:

  • This row property prevents the default column stacking.

  • Located in the sidebar, toggled off by default.

Reverse Stack on Mobile:

  • Reverses the stacking order of columns in mobile view.

Mobile Styles

  • Offers granular customization like text size and padding.

  • Available only in mobile design mode.

Special Considerations

Not every design benefits from the default mobile settings. Vertical stacking may distort navigation bars or other unique design elements. Therefore, always preview and test your design across different devices to ensure optimal user experience.

Best Practices

Although the builder offers options to override default behaviors, it's generally recommended to allow vertical stacking for a more mobile-friendly layout. Nevertheless, the final decision rests on your design requirements and creativity.