As a ground rule, all styling changes you make on the desktop version of your Onsite campaign, will also apply to the mobile version of your campaign. Here's an example of me changing the color of my header text:
But since it's very good practice to update a few stylings to make elements work better on mobile screens, any styling changes you perform to make your campaign look great on mobile, will not be applied to desktop. Here's an example of me making the text size smaller on my mobile version:
As soon as you begin making styling changes to an element on mobile, you break the connection between the desktop and mobile versions of that element - and any edits you potentially make on the desktop version afterwards will not be applied to the mobile version.
Keep in mind, that styling changes refers to the edits you can do with the text editor or within the "Styling" section in the sidebar when you select an element:
Text editor:
Styling section in the sidebar:
⚠️This means that actions like adding, deleting or configuring elements always will apply to both versions of your Onsite campaign.
Adopt styling changes from the element on the other version
In case you accidentally perform styling changes on mobile, that you actually prefer to use in your desktop campaign as well, you have the option to select the element on desktop and click "Use mobile style" in the sidebar. This will make all the styling changes you made on mobile take effect on desktop for that specific element. Here's an example:
🚨This also means that you have reconnected the elements, and any edits you make on desktop from now on, will also be applied to mobile.
This option also exists if you have made edits to an element on desktop, while the connection was broken (meaning that you already made changes to the mobile version) and you wish to apply those changes to the mobile counterpart.
Click the element on mobile, and select "Use desktop style" and watch the element adopt the same stylings as the desktop one. Here is an example of me changing the styles of an element on desktop while the connection was broken, and adopting the styles on my mobile version afterward:
How do I remove an element in my mobile campaign, but keep it on desktop or vice versa?
Since adding or removing an element is a "global" action that applies to both versions of your campaign, you need to use the "hide" option to remove an element you want to keep on the other version.
Here's an example of me adding a link button to my desktop campaign, and then hiding it on my mobile version by clicking the "Hide on mobile" option in the sidebar:
To keep an overview of all elements in your campaign - both the visible and hidden ones - you can click the "Layout" tab in the top of the sidebar. Here you'll see a desktop and mobile icon by each of your elements in the campaign.
🤓If an icon is crossed out, it means it is hidden on that version of the campaign. If an icon is gray it means it can't be hidden since it's a required element like an email field or a submit button.