Within Classic Builder, you can access a mobile-responsive version of your content at any time by navigating to the mobile version of your page in Classic Builder.
This article describes how to :
- Make existing content mobile-responsive using the Layout Assistant,
- Enabling the mobile version of your landing page, and
- Tracking Visitors to the Mobile or Desktop versions of your Landing Page
See our documentation on editing the mobile view without changing the desktop view for a video on best practices when editing the mobile version of your landing page in the Classic Builder.
To learn more about how responsive design works in Unbounce, see this handy FAQ: Can I Make My Landing Page Fully Responsive?
What are the breakpoints?
There are two viewports in Classic Builder: mobile and desktop versions of your landing page. The breakpoint is 600px, meaning any browser window with a viewport of 600px or less will see the mobile view of the content.
Any browser with a viewport greater than 600px will see the desktop version of the content.
Tablets or any devices with a screen size larger than 600px will see the desktop version of your landing page.
Creating Mobile-Responsive Content
You have three options for making mobile-responsive content in Unbounce:
-
Start from a template.
- All Unbounce templates are mobile responsive, so if you're creating a brand new page/popup, starting from one of these templates will mean that most of the initial setup work is done for you already.
-
Update an existing page.
- You can update any existing content to be mobile responsive. The objects from your desktop will appear in your mobile version, but you'll need to arrange them. Keep a keen eye on the out-of-bound warnings to ensure everything displays properly.
-
Start from a blank page.
- Build your desktop content normally; all objects added to your content will appear in your mobile version. And again, keep a keen eye on the out-of-bound warnings to ensure everything displays properly.
Looking for more resources? Take a gander at our Get Mobile Ready guide for some great tips and tricks.
Building Your Mobile-Responsive Content
- Navigate to your page in Classic Builder.
- To enable the mobile version of your page, click the buttons on the bottom right of the Classic Builder:
The mobile version of your landing page will appear in Classic Builder. To quickly make edits, you can use the Layout Assistant.
Apply the Layout Assistant to a Section or the Entire Page. Here's an example section before and after applying the Layout Assistant:
The Layout Assistant is useful if you're designing your content from a blank template.
Pro Tip:
To tweak sections after using the Layout Assistant or to move elements across your mobile page without affecting the desktop version, hold down the Command key (Mac) or Control key (Windows) while you move an element.
Resizing text: You can resize the text from your desktop version to fit your mobile version. Select the text box and use the scale bar on the upper right of the Properties Tab to adjust the font size on the mobile version only:
Forms and buttons: Forms and buttons will be the same across your mobile and desktop view. You can hide a button on one view and show a different one on the other. Your form must be consistent across both versions.
Hiding and Displaying Content: If you would like an element to appear on one version of your page only, use the Contents Panel to hide the elements on either version.
- 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.
For more useful tips on how to edit the mobile version of your page, see editing your mobile version of your landing page without changing the desktop version.
Enabling the Mobile Version
You may need to manually enable mobile view for your page (popup templates are mobile-responsive by default, but only some landing page templates are).
To enable mobile view for your landing page:
- Click the Mobile toggle button at the bottom right of the Classic Builder:
- Save and publish (or re-publish) your page.
To enable mobile view for your popup:
- Click the Mobile toggle button at the bottom right of the Builder:
- Save and publish (or re-publish) your popup.
Tracking Visitors to the Mobile or Desktop versions of your Landing Page
When you're 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).