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 about editing the mobile version of your landing page while keeping the desktop version intact. To start, check out this video demo: 

Toggling between the Desktop & Mobile Versions

Switch between your landing page's desktop and mobile versions by clicking the Desktop or Mobile buttons at the bottom right-hand corner of the Classic Builder. 

Using the Layout Assistant

The Layout Assistant will automatically align your layout as close as possible to the mobile specifications without you having to do everything manually.

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 the Layout Assistant is the best way to get your page looking mobile-ready. 

Holding the Command (Mac) or Control (Windows) While Moving Elements

After applying the Layout Assistant, hold down the Command key (Mac) or Control key (Windows) while you move an element.

This will allow you to move elements on the mobile version without affecting the desktop version, and vice versa. 

Resizing Text Using the Scale Bar

Changing the font size of a text element while in the desktop version will also update the mobile version.

Instead, follow these steps whilst in the 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 section to adjust the font size:
   

Continue to adjust the text's dimensions by dragging the sides or corners of the text.

Hiding & Showing Elements

Instead of deleting elements that won't fit in your mobile responsive version, you can "hide" them instead.

There are two ways of doing this:

1. Click the element, and then the Visibility icon in the Properties panel to toggle the visibility:
   
   
   OR
   
   
2. Navigate to the Contents panel on the left-hand side of the Classic Builder.
3. 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.

Updating Background Sections 

You change & edit the section backgrounds of 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 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. 

Tracking Visitors to the Mobile or Desktop versions of your Landing Page

When viewing your page stats in the Page Overview, Unbounce doesn't differentiate between mobile and desktop when counting visitors and views.

You can utilize the Google Analytics integration, then segment and filter those stats to track and compare mobile vs. desktop visits to your content.

Learn how to add Google Analytics to your Unbounce pages here: Integrating Unbounce with Google Analytics 4 (GA4).