All pages built with Leadpages are mobile responsive, adapting automatically to the device used to view them. This article will help identify best practices for making your pages mobile-friendly as well as how to create mobile-specific sections of your pages for when you want viewers on mobile devices to see something slightly different than those on a desktop computer.
The fine print
- The content of a page is automatically stacked vertically on mobile devices for easy scrolling and access to your content.
- While there is no need for a mobile view editor because of how the builder is mobile responsive, there is a way to show/hide specific sections for specific devices as explained below.
- Section templates are designed for mobile! Therefore, if you're looking for a section of speakers or pricing tiers with columns that present correctly on mobile, checkout out section templates here.
Background images
Because background images scale to fit the device on which the page is being viewed, it’s best to use pictures that don’t contain essential elements like text or faces, as parts of the image may be cut off as the image scales to the device.
There are a number of customizations you can make for your background within the builder. More info here ↗
Another option is create a section of your page to be shown only on mobile devices and hide the desktop one. Learn how below.
Stacking content
In order to preserve legibility and look good on smaller screens, your page will adjust to only show one column at a time on mobile devices. So instead of seeing three columns laid out side by side, they will stack upon one another vertically (with the left-most column at the top).
If the content of your page is not stacking correctly on mobile devices, use columns and rows within your page's layout in order to tell the builder what order you want your content to stack.
Step-by-step
- Hover over the section of the page that is not correctly stacking on mobile and click its name at the top-left corner of the section.
- Click the < icon next to the "[Section title] Settings".
- Expand the existing row containing the content by clicking the down_angle .
- You will likely see only one single column listed. Click +Add, then "Add a Column."
- Drag the content into the new column that you would like displayed after all content has been displayed from the first.
- Preview your page on mobile to make sure content is now correctly stacking.
If your page is rather long and contains only one section with one row etc., it may take more time to use this step-by-step than simply creating a mobile-specific section. Read on to learn how you can essentially edit two different versions of your page, one for mobile and one for desktop.
Device-specific display
Within page section settings is device-specific display, giving you the ability to show or hide specific sections to your visitors based on the device they are using to access your page.
At times, this feature can be used to create a custom section for mobile visitors in order to make sure the content presents how you want it to on those devices.
Creating a mobile section
- Hover over the section of the page that you would like to duplicate in order to start editing it for mobile, then click the more icon next to the section title.
- Select Duplicate.
- Scroll down the page to the newly-duplicated section and click the section title at the top-left corner of the section (often has "Copy" in the title).
- The new section's settings will open. Scroll to the bottom of the settings and click Device Specific Display.
- Toggle "Hide on Desktop" and "Hide on Tablet" ON. This section will now only show to visitors on a mobile device and you can customize its content and layout for mobile.
- Scroll up on the page to the original section and click the section title at the top-left corner of the section to open its settings.
- Scroll to the bottom of the settings and click Device Specific Display.
- Toggle "Hide on Mobile" ON. This section will now only show to visitors on a desktop or tablet devices.
Frequently asked questions
Is there a way to show more than one column across on a mobile device?
No, in order to optimally display content and provide clean upward/downward scrolling, columns will be stacked vertically.
Need more help?
You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗