In this article, you will learn how to style your landing pages for mobile devices.
Design your ActiveCampaign pages for mobile
To begin designing your pages for mobile, you'll need to access the mobile preview mode.
1. From the page editor, hover your mouse over the "Desktop" preview mode located in the top left bar.
2. A modal window will appear. Click the "Mobile" option.
The preview mode will switch to mobile. You can begin to add, remove, and edit blocks on your page.
About mobile style overrides
With mobile styling, you can choose to make mobile style overrides. Mobile style overrides are design changes that are only visible on a mobile device.
Visibility
You can choose to make any block visible or invisible in mobile view. You can also make any block visible or invisible in desktop view.
Page block styles
You can edit the following block styles to only be different within mobile view:
- Width
- Background
- Inner spacing
- Border
- Corners
- Shadows
- Opacity
You cannot edit the following styles to be different only in mobile view. Any edits you make on the following will automatically change on desktop and mobile view:
- Adding text
- Adding content
- Changing theme colors
- Text styling (bold, italic, size, etc.)
Add mobile style overrides
Any edits you make while in mobile preview mode add mobile style overrides. If an element has a mobile override, a red "X" icon will appear in the right pane next to the style:
Make blocks visible or invisible in mobile view
You can make blocks and even entire sections of your page visible or invisible in mobile view by clicking the "Visibility" icons located in the right pane.
By default, both icons will be selected. To make a block or section visible on mobile only:
1. Click the section in the page editor you wish to work with.
2. Click the "Desktop" icon to unselect it.
The "Desktop" icon will turn from blue to grey; the "Mobile" icon will remain blue. This means that the block or section is only visible on mobile.
Rearranging page blocks can only be done in desktop mode. Any changes you make with your page layout on desktop will reflect on mobile by default.
Remove mobile style overrides
To remove mobile style overrides, click the mobile style override icon. This is located in the right pane for the selected block.
Removing the mobile style override reverts the block styles to match the desktop design.