You may notice that every time you edit the mobile version of the page, the desktop view also changes.
Any edits you make to the mobile version also update to the desktop version, as they are two versions of the same page and share the source code.
To edit the mobile version of your landing page while keeping the desktop version intact, follow these tips:
Use the Layout Assistant
The Mobile Layout Assistant can be found at the top right-hand corner of the builder, under the Properties & Page Properties tab. The Layout Assistant will automatically align your layout as close as it can get to the mobile specifications without you having to do everything manually.
Here's how to toggle the Layout Assistant:
- Click on the page Section you'd like to rearrange.
- Head over to the Properties or Page Properties tab.
- Click the option to apply the Layout Assistant to
- a Section: this will rearrange content within the highlighted Section only, or,
- All Sections: rearrange all elements in all Sections on the mobile landing page:
You may have to do some tweaks here and there to get everything to your liking, but starting by clicking this button is the best way to get your page looking mobile-ready.
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 element's placement in the other version.
Use the Arrow Keys
Select the element you'd like to move, and use the directional arrow keys on your keyboard to move the selected element to your desired location.
If you've got a larger space to cover in your move and want to move your element in larger increments, you can do so by holding shift and then pressing the directional arrow key.
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 while editing the mobile version.
- Locate the Properties panel on the right
- Use the Scale bar in the Geometry to adjust the font size
Feel free to continue making adjustments to the text element's dimensions, 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.
You can also edit and change Section backgrounds in the Mobile view without affecting your Desktop Section background.
- Click on Mobile in the bottom right of the Unbounce Builder to switch to Mobile view.
- Click on the background Section that you'd like to change.
- Select the Properties panel from the top right corner of the Builder.
- Scroll down to the Background Properties section and select an image or background color that you'd like to use.
- Save your changes.
Once you've edited the Section background in your Mobile view, you'll notice that your Desktop view remains unaffected. Now that you've altered the Mobile view, you can change your background on the Desktop view as well without affecting Mobile, as they are both completely separate.