Mobile-Specific Styling in the Email Designer
The Delivra email designer includes settings to apply styles specifically for mobile devices without affecting how your email looks on desktop, giving you precise control over how your email renders across different screen sizes.
Combined with Hide on Mobile and Stack on Mobile settings, you can fine-tune the full mobile experience of your email directly inside the designer.
How to Access Mobile-Specific Styles
- Open or create a campaign and navigate to the Design step.
- Select a section or content block in the email canvas to activate the settings panel on the right.
- In the top-right of the settings panel, you will see two toggle buttons: Desktop and Mobile. Click Mobile to switch to the mobile styling view:
- Any style changes you make while Mobile is selected will apply only to the mobile view of your email. Your desktop design remains unchanged.
- To return to desktop styling, click Desktop in the same toggle.
Tip: Build your desktop design first before toggling to change Mobile design.
What You Can Adjust in Mobile View
When the Mobile toggle is active, the settings panel updates to show style options for mobile. Depending on the element selected, you can adjust:
Background. Set a different Standard BG or Extended BG color for mobile, separate from your desktop background.
Width. Control the width of a section or container specifically on mobile screens.
Padding. Adjust top, bottom, left, and right padding independently for mobile so your content has the right spacing on smaller screens.
Full Width. Toggle a section to stretch full width on mobile even if it has a fixed width on desktop.
Border. Show or hide a border on mobile independently from the desktop view.
Hide on Mobile and Stack on Mobile
In addition to the mobile-specific style controls, the designer also includes two layout settings that work alongside the Mobile toggle:
Hide on Mobile. Hides a selected section or content block entirely when your email is viewed on a mobile device. The content still appears on the desktop. Use this to remove elements that don’t work well on smaller screens such as a wide decorative banner or a multi-column layout that doesn’t need to appear on mobile.
Stack on Mobile. Controls whether columns within a multi-column row stack vertically on mobile. When Stack on Mobile is enabled, a two-column or three-column layout will reflow into a single column on smaller screens, making content much easier to read. This is enabled by default on most layouts.
Hide on Mobile and Stack on Mobile are applied at the section or row level. Select the section you want to control, then look for these options in the settings panel.
Previewing Your Mobile Design
You can switch between Desktop and Mobile preview views at any time using the device toggle icons at the top of the email canvas for the monitor icon for desktop and the phone icon for mobile. This lets you see how your email will render on each device as you design:
Tip: Use the canvas preview toggle (phone/monitor icons) to check your layout, and use the right-panel Mobile toggle to make style adjustments. They work together but serve different purposes — one is for previewing, one is for editing.
Things to Know
- Mobile-specific styles only affect how your email renders on mobile devices. Your desktop design is always preserved separately.
- Not all email clients support mobile-specific styles. Clients that do not support responsive CSS will render the desktop version regardless of your mobile settings. Always test your email across multiple clients before sending.
- The Mobile toggle in the right panel controls which styles you are editing. The phone icon at the top of the canvas controls which view you are previewing. These are two separate controls.
- If you apply a background color in Mobile view, it will override the desktop background color on supported mobile email clients.
- Stack on Mobile is enabled by default for most multi-column layouts. Disable it if you want columns to remain side-by-side on mobile.
Related Articles
Saving button styling to an email template
Button Styling in the Drag-and-Drop Editor When creating beautiful and consistent emails, small design details can have a big impact. One of those details is button styling. The Delivra drag-and-drop editor allows you to define custom button styles ...Email designer 101
Delivra offers a modernized email editor that frees you from fussing with email design and makes it ultra-easy to personalize messages for maximum engagement. General Layout On the left of your page you will find layout elements that can be added ...How do I save my images for retina displays (high-resolution mobile screens) in my email?
Modern mobile devices have retina (or high-density, or high-resolution) displays. A retina screen displays up to 3x the amount of pixels per point, which means the images would have to be up to 3x as large as the display size. How do I save retina ...Locking content in email templates
The Delivra Editor includes a helpful feature called Content Locks, designed to safeguard your email designs. Content Locks allow users with the correct permissions to lock a specific cell or an entire layout row so that other users cannot edit them ...How do I use a custom stylesheet with my email design?
Using External Stylesheets for Mobile Email Design For designers comfortable working with CSS, Delivra offers the ability to upload and apply external stylesheets to control the mobile styling of emails. This gives you full flexibility over ...