Mobile-specific Display Settings
Adjust the look of your campaigns by device type.
Mobile-Specific Display Settings is the layer of per-element mobile controls in OptiMonk's campaign editor that lets you adjust how individual campaign elements look on mobile devices independently from their desktop appearance. While OptiMonk's auto mobile-optimization handles the overall layout reflow automatically, Mobile-Specific Display Settings give you fine-grained control over the details that matter for a polished mobile experience: the margin and padding around an element, its width relative to the mobile viewport, its text alignment and font size ratio, which image appears on mobile versus desktop, and the size and alignment of buttons and input fields. These settings are accessible by switching to the mobile view in the editor and clicking any element — settings that support independent mobile values are marked with a mobile icon in the right-hand panel, distinguishing them from settings that apply universally to both devices. Changes made in mobile view only affect the mobile layout; the desktop view remains unchanged, and vice versa. This bidirectional independence means you can optimize both views to their respective contexts without any compromise between them.
Key benefits
- Refine mobile details without touching the desktop layout. Some elements need different sizing, spacing, or alignment on mobile to look right — a text block that is left-aligned on desktop may read better centered on mobile, or a button that is 300px wide on desktop may need to be full-width on mobile to be easily tappable. Mobile-specific Display Settings let you make these adjustments in isolation, so the desktop layout remains exactly as designed while the mobile layout is independently tuned for its context.
- Serve mobile-specific images for faster loading and better visual fit. The mobile image setting lets you assign a different image to an element for mobile — either a smaller file size version of the same visual (for faster loading on cellular connections) or a differently cropped version (for a vertical viewport rather than a wide horizontal one). This prevents the common problem of a landscape-oriented hero image looking awkward when scaled down to a mobile popup, without forcing a compromise in the desktop design.
- Precise text size control per device. Text that is readable at a given font size on desktop may be too small or too large when the same layout is reflowed to mobile proportions. The text size ratio setting for mobile lets you scale the font independently — so a heading that works at 28px on desktop can be adjusted to 22px on mobile without changing the desktop value. Combined with mobile-specific text alignment, this gives you full typographic control for both contexts from a single campaign.
How it works
In OptiMonk's campaign editor, click the mobile device icon in the toolbar to enter mobile view mode. The editor canvas updates to display the campaign at mobile dimensions, and the element panel on the right now shows mobile-specific controls alongside the standard settings.
Click any element in the mobile view — a text block, an image, a button, or an input field. In the settings panel on the right, settings that can be configured independently for mobile are marked with a small mobile icon next to them. These include margin, padding, and mobile width; text alignment and text size ratio; image selection (for using a mobile-specific image); button size, width, and alignment; and input field text alignment, font size, width, and height. Adjust any of these values — they apply to mobile only and do not affect the desktop layout.
After making your mobile-specific adjustments, switch back to desktop view to confirm the desktop layout is unchanged. Then return to mobile view for a final check. Use the Live Preview to see the campaign on your actual site on a mobile device if needed. Once satisfied with both views, proceed to publish.
Frequently asked questions
What are Mobile-specific Display Settings in OptiMonk?+
Mobile-specific Display Settings are per-element controls in OptiMonk's campaign editor that let you adjust how individual elements look on mobile independently from their desktop appearance. Settings marked with a mobile icon in the editor panel — including margin, padding, mobile width, text alignment, text size ratio, image selection, button display, and input field dimensions — can be configured separately for mobile without affecting the desktop layout. They are accessed by switching to mobile view in the editor and clicking any element.
How do I know which settings apply to mobile only versus both devices?+
In OptiMonk's editor, settings that can be configured independently for mobile are marked with a mobile icon in the right-hand panel when you are in mobile view. Settings without this icon apply universally to both desktop and mobile. This visual indicator makes it straightforward to identify which controls you can adjust for mobile without impacting the desktop layout.
Can I use a completely different image on mobile than on desktop?+
Yes. The mobile image setting lets you specify a separate image asset for the mobile layout — independently of the image shown on desktop. This is useful for using a differently cropped version (portrait rather than landscape), a lighter file-size version for faster loading on cellular connections, or an entirely different visual that works better in a narrow mobile viewport.
Do mobile-specific settings affect the desktop view?+
No. Mobile-specific settings — any adjustment made in mobile view to a setting marked with the mobile icon — apply exclusively to the mobile layout. The desktop view is completely independent. You can adjust a button to be full-width on mobile while it remains a fixed 250px width on desktop, or center-align text on mobile while it remains left-aligned on desktop, with no interaction between the two.
What is the text size ratio setting for mobile?+
The text size ratio setting on mobile allows you to scale a text element's font size relative to its desktop size, specifically for mobile. Rather than setting an absolute font size for mobile, the ratio scales the desktop value proportionally — for example, a ratio of 0.8 renders the text at 80% of its desktop size on mobile. This is useful when a heading or body text needs to be proportionally smaller on mobile to fit the narrower viewport without requiring you to calculate and manually enter a specific pixel value.
Try OptiMonk for free
Launch your first campaign, learn what works, then scale what converts.