20.1 Responsive Landing Page Design

A Landing Page should be reviewed for the screen sizes and devices used by its intended audience.

AIUNIFY Funnels provides responsive presentation capabilities and its Template Preview includes separate Desktop, Tablet, and Mobile review controls before a Template is selected.

After the Template becomes your own Landing Page, responsive review remains an important part of the editing and launch workflow.

20.2 Template Preview and Builder Are Different Workspaces

Template Preview	Lets you inspect the starting Template in Desktop, Tablet, and Mobile preview modes before creating the Landing Page.
Landing Page Builder	Lets you edit the saved Main Page and Thank You Page belonging to your user account.
Public Landing Page	Is the final visitor-facing result that should be tested before directing live traffic to the page.

20.3 The Current Builder Mobile Limitation

The current Landing Page Builder is not intended for editing from a small mobile viewport.

At browser widths of 768 pixels or less, the Builder displays the warning:

Builder not work on mobile

The Builder then exposes a Back option rather than presenting the normal editing experience.

Use a desktop or sufficiently wide browser for page editing. A mobile phone should be used to test the visitor experience, not as the primary Builder editing environment in the current implementation.

20.4 Designing for Multiple Screen Sizes

Responsive design means that the same Landing Page content must remain usable as the available screen width changes.

While editing from a supported wider screen, use the Builder's component structure and styling controls to create layouts that can adapt appropriately rather than designing only for one fixed desktop width.

20.5 What to Review on Desktop

Desktop review should confirm:

1. Major sections appear in the intended order.
2. Headings and body text have a clear hierarchy.
3. Images have appropriate dimensions and alignment.
4. Forms and calls to action are easy to locate.
5. Buttons and payment controls are not obscured.
6. Columns and wide sections do not leave unintended empty space.

20.6 What to Review on Tablet

Tablet widths often reveal issues that are less obvious on a large desktop screen.

Review:

1. Whether multi-column sections still fit comfortably.
2. Whether text begins wrapping in undesirable places.
3. Whether images scale without covering other content.
4. Whether forms remain easy to complete.
5. Whether calls to action remain visually prominent.

20.7 What to Review on Mobile

Mobile visitors operate with the narrowest screen and commonly interact by touch.

On the actual public Landing Page, check:

1. Text readability without horizontal scrolling.
2. Headlines that do not overflow their containers.
3. Images that scale within the available width.
4. Buttons that remain visible and easy to select.
5. Form fields that can be completed comfortably.
6. Payment controls that remain accessible when used.
7. No unexpected horizontal page overflow.

20.8 Review Both Main Page and Thank You Page

Responsive testing must include both page experiences when both participate in the campaign.

A well-designed Main Page does not guarantee that the separately saved Thank You Page will also display correctly at narrower widths.

20.9 Review Reusable Blocks After Customization

A reusable Block may look balanced in its original content state but behave differently after you replace its sample text, images, headings, or buttons.

Longer copy, different image proportions, and larger calls to action can change the responsive layout.

Recheck a Block after meaningful content changes rather than relying only on how the original Block looked when first inserted.

20.10 Typography and Responsive Layout

Font family, font size, line length, and heading length can affect how a page behaves as it becomes narrower.

When a section looks correct on desktop but breaks on a narrower screen, inspect both the container layout and the text styling before assuming that the problem is caused by only one element.

20.11 Forms on Multiple Devices

Because Landing Page forms are used to collect Leads, responsive testing should include an actual test submission from representative screen sizes.

Verify that:

1. Every required field is visible.
2. Field labels remain understandable.
3. The submit control can be reached and selected.
4. The configured next action occurs after submission.
5. The test submission appears in Leads when the Landing Page is configured to capture it.

20.12 Payment Controls on Multiple Devices

If the Main Page sells a Product or service, review the payment-related controls on the public page at the device sizes important to your audience.

Confirm that the product call to action remains visible and that the checkout workflow can be started without page-layout elements covering or pushing the control outside the usable viewport.

20.13 Preview Is Not a Substitute for Public Testing

Responsive preview tools are useful for identifying obvious layout problems, but the public Landing Page remains the authoritative visitor experience.

Browser rendering, actual device size, touch interaction, form behavior, external links, and payment redirections should be tested through the published visitor path.

20.14 Recommended Responsive Test Sequence

1. Edit the Landing Page from a supported wider-screen Builder environment.
2. Save the Main Page.
3. Save the Thank You Page if it was edited.
4. Open the actual public Landing Page.
5. Review desktop presentation.
6. Review a tablet-sized presentation.
7. Review mobile presentation on a representative device or viewport.
8. Submit a test form when lead capture is part of the page.
9. Test the expected post-conversion destination.
10. Repeat after any major structural or style change.

20.15 Common Responsive Problems

Problem	Review
Horizontal scrolling	Inspect wide containers, images, fixed-width elements, and component styles.
Text overlaps another element	Review typography, spacing, container sizing, and the element hierarchy.
Button disappears below or outside a section	Review container layout, spacing, and nearby component dimensions.
Image dominates the mobile screen	Review image sizing and responsive width behavior.
Form is difficult to complete	Review field width, spacing, labels, and the submit control at the public-page size.

20.16 Responsive Review Is Part of Publishing

A Landing Page should not be considered launch-ready solely because the Builder save succeeded.

Publishing preparation includes confirming that the actual visitor-facing experience works across the devices relevant to the campaign.

Operating principle: Edit from a supported wider-screen Builder, design with responsive behavior in mind, and validate the real public Main Page and Thank You Page at desktop, tablet, and mobile sizes before sending traffic.