You may notice that every time you edit the mobile version of the page, the desktop view also is affected.
Any edits you make to the mobile version are also made to the desktop version as they are two versions of the same page and share the source code. To prevent this from happening, try the following tips:
Hold Command (Mac) or Control (Windows)
Hold down the Command key (Mac) or Control key (Windows) while you move an element. This will allow you to move elements outside of a page section on one version without affecting the placement of the element in the other version.
Use the Scale Bar
If you change the font size of a text element, both desktop and mobile will be affected. Instead, follow these steps on your mobile version:
- Click on the text element
- Locate the Properties Panel on the right
- Use the Scale bar in the Geometry section to adjust the font size
Feel free to continue making adjustments to the dimensions of the text element, without affecting your desktop version, by dragging the sides or corners.
Instead of deleting elements that won't fit in your mobile responsive version, you can "hide" them. There are 2 ways of doing this:
- Click the element, and then the Visibility icon in the Properties panel to toggle the visibility
- Open the Contents panel in the bottom left, locate the element, and click the eye icon beside the element you'd like to hide until it becomes a solid circle.