How Do I Edit In Mobile View Without Changing the Desktop View in the Classic Builder?

While editing your page in the Classic Builder, you may notice that every time you edit the mobile version of the page, the desktop view also changes. This is because the mobile and desktop version share the same source code.  

Follow this article to learn more on how to edit the mobile version of your landing page while keeping the desktop version intact. To start, check out this video demo: 

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:

1. Click on the page Section you'd like to rearrange.
2. Head over to the Properties or Page Properties tab.
3. 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 make 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 changing 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 update as well. Instead, follow these steps on your mobile version:

1. Click on the text element while editing the mobile version. 
2. Locate the Properties panel on the right
3. 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 changing your desktop version, by dragging the sides or corners.

Hide & Show Elements

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
  
  
  
  OR
• Navigate to the Contents panel on the left hand side of the page, locate the element you'd like to hide, and click the eye icon beside the element until it becomes a solid circle.
  
  

Learn more about hiding and showing elements within our documentation: Hiding and Displaying Objects in the Classic Builder.

Update Background Sections 

You change & edit the section backgrounds of either the mobile or desktop version without changing the other. 

1.  Click on Mobile in the bottom right of the Unbounce Builder to switch to Mobile view. 
2. Click on the background Section that you'd like to change. 
3. Select the Properties panel from the top right corner of the Builder. 
4. Scroll down to the Background Properties section and select an image or background color that you'd like to use. 
5. Save your changes. 

Once you've edited the section background in the mobile version, you'll notice that your desktop version remains as-is.