Use these recommended aspect ratios, sizes, and Cascading Style Sheets (CSS) selectors to design Recurly Engage prompts that look right on desktop and mobile browsers.
Available on all Recurly Engage subscription plans
- You must have Company, App Administrator, or App Member permissions in Recurly Engage.
The Default Prompt Sizes settings define recommended aspect ratios, dimensions, and CSS selectors for each prompt type on desktop and mobile browsers.
Consistent appearance
Standardize prompt dimensions for a unified look and feel.
Responsive design
Use optimized sizes for both desktop and mobile environments.
Developer-friendly
Use the exposed CSS selectors to style and customize prompts.
| Setting | Value |
| Supported aspect ratios (desktop) | 2:1, 4:1, 6:1, 8:1, 10:1 |
| Recommended size (desktop) | 960 × 300 px |
| Recommended size (mobile browser) | 300 × 200 px |
| Environment | CSS selector | Controls |
| Desktop | .tile-header-msg-wrp | Text container |
| Desktop | .promo-tile-wrapper-header | Prompt title |
| Desktop | .promo-tile-wrapper-body | Prompt message |
| Desktop | .promo-tile-wrapper-footer | Buttons container |
| Mobile browser | .rtile-mweb-content-msg | Text container |
| Mobile browser | .rtile-mweb-content-footer | Buttons container |
| Setting | Value |
| Supported aspect ratios (desktop) | 1:2, 1:3, 1:4 |
| Recommended size (desktop) | 250 × 500 px |
| Recommended size (mobile browser) | 200 × 300 px |
| Environment | CSS selector | Controls |
| Desktop | .tile-header-msg-wrp | Text container |
| Desktop | .promo-tile-wrapper-header | Prompt title |
| Desktop | .promo-tile-wrapper-body | Prompt message |
| Desktop | .promo-tile-wrapper-footer | Buttons container |
| Mobile browser | .rtile-mweb-content-msg | Text container |
| Mobile browser | .rtile-mweb-content-footer | Buttons container |
| Setting | Value |
| Supported aspect ratios (desktop) | 1:1, 1:2 |
| Recommended size (desktop) | 250 × 500 px |
| Recommended size (mobile browser) | 375 × 205 px |
| Environment | CSS selector | Controls |
| Desktop | .tile-header-msg-wrp | Text container |
| Desktop | .promo-tile-wrapper-header | Prompt title |
| Desktop | .promo-tile-wrapper-body | Prompt message |
| Desktop | .promo-tile-wrapper-footer | Buttons container |
| Mobile browser | .rtile-mweb-content-msg | Text container |
| Mobile browser | .rtile-mweb-content-footer | Buttons container |
| Setting | Value |
| Supported aspect ratios (desktop) | 6:1, 8:1, 10:1 |
| Recommended size (desktop) | 100% × auto |
| Recommended size (mobile browser) | 100% × auto |
| Environment | CSS selector | Controls |
| Desktop | .promo-text-wrapper-container | Text container |
| Desktop | .promo-text-title | Prompt title |
| Desktop | .promo-text-message | Prompt message |
| Mobile browser | .promo-text-wrapper-mobile | Text container |
| Setting | Value |
| Recommended size (desktop) | 450 × 180 px |
| Recommended size (mobile browser) | 100% × 120 px |
| Environment | CSS selector | Controls |
| Desktop | .rfmodal-text-container | Text container |
| Desktop | .rfmodal-header | Prompt title |
| Desktop | .rfmodal-message | Prompt message |
| Desktop | .rfmodal-footer | Buttons container |
| Mobile browser | .mweb-widget-msg-container | Text container |
| Mobile browser | .rfmodal-header-mobileweb | Prompt title |
| Mobile browser | .rfmodal-message-mobileweb | Prompt message |
| Mobile browser | .rfmodal-footer-mobileweb | Buttons container |
| Setting | Value |
| Recommended size (desktop) | 1200 × 800 px (text and buttons area) |
| Environment | CSS selector | Controls |
| Desktop | .rfmodal-text-container | Text container |
| Desktop | .rfmodal-header | Prompt title |
| Desktop | .rfmodal-message | Prompt message |
| Desktop | .rfmodal-footer | Buttons container |
| Mobile browser | .mobilewebModalContentWrapper | Text container |
| Mobile browser | .rfmodal-header-mobileweb | Prompt title |
| Mobile browser | .rfmodal-message-mobileweb | Prompt message |
| Mobile browser | .rfmodal-footer-mobileweb | Buttons container |
| Setting | Value |
| Recommended sizes (desktop) | Large: 1200 × 800 px
Medium: 960 × 640 px
Small: 750 × 500 px |
| Recommended size (mobile browser) | 500 × 800 px |
| Environment | CSS selector | Controls |
| Desktop | .rfmodal-text-container | Text container |
| Desktop | .rfmodal-header | Prompt title |
| Desktop | .rfmodal-message | Prompt message |
| Desktop | .rfmodal-footer | Buttons container |
| Mobile browser | .mobilewebModalContentWrapper | Text container |
| Mobile browser | .rfmodal-header-mobileweb | Prompt title |
| Mobile browser | .rfmodal-message-mobileweb | Prompt message |
| Mobile browser | .rfmodal-footer-mobileweb | Buttons container |
| Setting | Value |
| Recommended sizes (desktop) | Large: 1200 × 619 px
Medium: 960 × 619 px
Small: 750 × 619 px |
| Environment | CSS selector | Controls |
| Desktop | .rfmodal-text-container | Text container |
| Desktop | .rfmodal-header | Prompt title |
| Desktop | .rfmodal-message | Prompt message |
| Desktop | .rfmodal-footer | Buttons container |
| Mobile browser | .mobilewebModalContentWrapper | Text container |
| Mobile browser | .rfmodal-header-mobileweb | Prompt title |
| Mobile browser | .rfmodal-message-mobileweb | Prompt message |
| Mobile browser | .rfmodal-footer-mobileweb | Buttons container |
| Setting | Value |
| Recommended size (desktop) | 1000 × 100 px |
| Recommended size (mobile browser) | 100% × 120 px |
| Environment | CSS selector | Controls |
| Desktop | .rfmodal-text-container | Text container |
| Desktop | .rfmodal-header | Prompt title |
| Desktop | .rfmodal-message | Prompt message |
| Desktop | .rfmodal-footer | Buttons container |
| Mobile browser | .mweb-widget-msg-container | Text container |
| Mobile browser | .rfmodal-header-mobileweb | Prompt title |
| Mobile browser | .rfmodal-message-mobileweb | Prompt message |
| Mobile browser | .rfmodal-footer-mobileweb | Buttons container |
