As a ground rule, all styling changes you make on the desktop version of your Onsite Pop-up, will also apply to the mobile version of your form. 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 form 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 Pop-up.
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 form 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 form, 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 forms, 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 form, 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 form - 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 form.
🤓If an icon is crossed out, it means it is hidden on that version of the form. 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.