A Must-Know Guide for Mobile
Handy tips
RESOURCE
Use CMD/CTRL: the power move
Want to move something on the desktop or mobile version of a page without affecting the placement on the other version?
Hold down the Command (Mac) or Control (Windows) key while you make the change to keep the placement of the element static in the other view.
Separate Mobile Elements
I want my mobile header to say “Mobile” and my desktop header to say “Desktop”. Can I do this?
Sticky Mobile Navigation Bar
Give your users a way to quickly navigate your mobile landing page while allowing them to jump to the form at any time by creating your own sticky hamburger bar and making it mobile friendly.
Let's get mobile-serious now
We’ve added chapter marks in this video so you can jump ahead to whichever content interests you the most:
Mobile Nightmares Interpreted for You
PAGE CATEGORY
Scaling Elements
Changing your text size will affect both views.
To resize text for one view only, use the scale bar.
Layout Assistant
Access the Layout Assistant by clicking the Properties tab on the right side of the screen. This feature is the best way to get started on customizing your mobile-responsive content. You can apply the Mobile Layout Assistant to your whole page/popup/sticky bar, or to individual sections, which will get you to a much friendlier starting point. The feature works best if you apply it first, then go ahead with the detail work. Try to avoid making changes before you apply layout assistant, as this can cause minor reparenting issues.
Hiding Elements
If you’d like an element to appear on only one version (desktop or mobile) of a page, you can do this by hiding the element on one version. Click the element and select the Visibility icon in the Properties tab to toggle the visibility.
Note: Creating completely separate designs on mobile and desktop can slow down the saving/republishing functionality.
What are some best practices when creating a mobile landing page?
Mobile landing pages aren’t so different from their desktop counterparts, and standard best practices still apply. However, there are some additional considerations and optimizations for on-the-go visitors. It’s why you should really be building separate landing pages for mobile (or, at the bare minimum, ensuring that your page is mobile-responsive).
We have covered some tips for how to knock your next mobile landing page outta the park on our blog post here.
How do I remove white spacing/scrollbars on mobile?
If you're seeing empty white space or scrollbars on the mobile version of your landing page, there may be an element on the mobile version that is extending outside of the safe zone of your published page.
To learn how to fix this issue, you can review our documentation here.
Why is the mobile version of my landing page not fully responsive?
Our pages are currently mobile responsive, not fluid responsive. Unbounce is built with the flexibility of allowing you to drag-and-drop elements wherever you want -- unfortunately, this prevents us from offering a fluid grid layout.
Our Mobile Responsive feature offers 2 viewports: Mobile and Desktop, which uses a single break point of 600px, meaning any device with a viewport width wider than 600px will see the Desktop version of your landing page, and any device with a width smaller than 600px will see the Mobile page.
To learn more about our Mobile Responsive Feature, you can take a look here.
Is my landing page tablet responsive?
When viewing the page on a tablet, the desktop view is loaded but it is scaled to fit the tablet screen.
So while this isn't 100% fluid responsive, it is still functional and will ensure the vast majority of your traffic is served a version that they can see and use without issue.
To learn more about our how our Responsive Feature works on tablets, you can take a look here.
Why doesn't my video background work on mobile devices?
At this time, our background video feature only works on desktop devices and not mobile. This is due to the limitations of most mobile devices, as they typically need to load apps outside of the mobile browser to get videos to work.
The only workaround you could consider is changing the background image of your mobile page to a high-res gif. Gifs can load on mobile browsers, and you can have different backgrounds between the desktop and mobile view.
Understand How to Effectively Use the Mobile View
Getting Familiar with the Content Panel
Using the Content Panel for Mobile Building
Optimizing Your Mobile Layout with the Layout Assistant
Moving Mobile Elements Between Sections
Hiding Page Elements in Mobile/Page View
All You Need to Know about Mobile in One Handy Video
Want more knowledge?
Connect with savvy marketers from around the world to discuss landing pages, conversion rate optimization, a/b testing and all things marketing in the Unbounce Community.
A Must-Know Guide for Mobile
Handy tips and tricks for getting your landing page mobile ready.
Scaling Elements
Hiding Elements
If you’d like an element to appear on only one version (desktop or mobile) of a page, you can do this by hiding the element on one version. Click the element and select the Visibility icon in the Properties tab to toggle the visibility.
Note: Creating completely separate designs on mobile and desktop can slow down the saving/republishing functionality.
Want more knowledge?
Do you want to learn more about what you can do with the Unbounce Builder? We have a lot of great how-to tutorials in our Help Center!
and tricks for getting your landing page mobile ready.
© Unbounce All rights reserved.
Layout Assistant
Access the Layout Assistant by clicking the Properties tab on the right side of the screen. This feature is the best way to get started on customizing your mobile-responsive content. You can apply the Mobile Layout Assistant to your whole page/popup/sticky bar, or to individual sections, which will get you to a much friendlier starting point.The feature works best if you apply it first, then go ahead with the detail work. Try to avoid making changes before you apply layout assistant, as this can cause minor reparenting issues.
