Mobile Leaks

Fix Mobile CTA Position to Boost Mobile Ad Conversions

You tested it on your phone. It looked fine. You shipped it. But your phone is a recent flagship with a tall screen and plenty of viewport real estate. On an iPhone SE or a budget Android - the devices that make up a significant slice of real-world traffic - your primary CTA is invisible until the visitor scrolls. Most of them never do. This is the mobile blind spot that quietly hurts conversion rates that have already been "optimised."

Get your free audit →Explore $97 Repair Sprint

The Device Blind Spot Founders Never Catch

When founders say they've "checked mobile," they almost always mean they opened their site on their own device. That device is typically a recent iPhone Pro or a current-generation Android flagship - a screen that is taller, sharper, and more forgiving than what a meaningful portion of their audience is actually using.

The result is a form of survivorship bias baked into the QA process. The founder sees the CTA. The tester sees the CTA. The designer sees the CTA. But the visitor on a 375px-wide screen with a 667px viewport height sees a hero section, a navigation bar, and a lot of padding - and then bounces before they ever reach the button that was supposed to convert them.

This isn't a rare edge case. StatCounter data consistently shows that small-screen phones represent a disproportionate share of mobile traffic, especially in markets where mid-range and older devices remain dominant. Testing only on your own hardware is not mobile optimisation. It is desktop optimisation with a smaller window.

The 375px Problem: Why This Specific Width Breaks Layouts

375px is the CSS viewport width of the iPhone SE (all generations), the iPhone 6/7/8 series, and a wide range of budget Android handsets. It is not an exotic outlier - it is one of the most common viewport widths in mobile analytics worldwide. Yet most desktop-first landing pages were never seriously tested at this width.

The problem compounds quickly. A layout that reflows cleanly at 390px (iPhone 14) or 414px (iPhone Plus series) often breaks at 375px in ways that are subtle but fatal. Text wraps an extra line. An image that was sized to fill a comfortable column now forces the page to scroll before the fold even begins. Padding that felt generous on a larger screen consumes a full third of the available viewport height.

The CTA that lived comfortably "above the fold" at 390px is now 20 or 40 pixels below it at 375px. That gap is all it takes. Visitors who arrive on a small phone see a page that does not immediately offer them anything to do, and they leave.

What "Below the Fold" Actually Means on Mobile

The fold is not a pixel count. It is the point at which a visitor has to take an active action - scrolling - before they can see more of your page. On mobile, that threshold matters more than on desktop because mobile scrolling behaviour is different. Desktop users scroll habitually. Mobile users scroll when they are already engaged.

Scroll depth data from heatmap tools consistently shows that mobile bounce rates are highest among visitors who never scroll at all. These are not visitors who scrolled and left - they are visitors who landed, saw what was immediately visible, decided there was no obvious next step, and closed the tab. The fold is the decision boundary. What sits above it is your entire pitch to that visitor.

On a 375×667px viewport with a browser chrome bar consuming roughly 60–80px, you have approximately 580–600px of usable above-fold space. That sounds like a lot until you account for a sticky navigation bar (50–70px), a headline (80–120px), a sub-headline (40–60px), and a hero image (150–200px). The CTA that you designed to sit naturally below the hero is now sitting at pixel 500–560 on a good day - and at 620px on a bad one.

Three Layout Patterns That Bury CTAs on Small Screens

Most buried CTAs on mobile are not the result of careless design. They are the result of three specific patterns that look fine at larger sizes and silently break at 375px.

Long hero images. A hero image that is set to a fixed height or a high aspect ratio pushes everything below it down the page. On desktop this creates visual breathing room. On a 375px screen it consumes the entire above-fold area before the headline has even been read. The fix is to cap hero image height explicitly on small screens - max-h-40 or similar - or to switch to a text-only hero on mobile entirely.

Stacked navigation. Hamburger menus that expand into full-height overlays, or navigation bars that wrap to a second row on small screens, are common culprits. Even a navigation that simply renders taller than expected at 375px can push the hero section down by 20–40px - enough to move the CTA below the fold. Navigation height should be explicitly capped and tested at the 375px breakpoint.

Excessive padding. Generous vertical padding on the hero section - py-20 orpy-24 - is a standard desktop pattern that consumes 80–96px of mobile viewport. Stack two padded sections before the CTA and you have lost 160–192px of your 580px budget before a single content element has rendered. Mobile padding should be reduced aggressively:py-10 orpy-12 at most on small screens.

How to Check Your Page Right Now

You do not need a physical device to do this check. Chrome DevTools gives you an accurate viewport simulation that takes two minutes to run.

Open your landing page in Chrome. Press F12 to open DevTools, then click the device toolbar icon (the phone/tablet toggle in the top-left of the DevTools panel), or press Ctrl+Shift+M. This activates responsive mode.

In the device dropdown at the top, select iPhone SE. This renders your page at 375×667px - the exact worst-case viewport. Do not scroll. Look at what is visible in that first screen. Is your CTA button visible? Is there any clear call to action above the fold, or just a hero image and a navigation bar?

Also test at Galaxy S8+ (360×740px) and manually enter 375×667 as a custom size if the preset is not available. If your CTA is not fully visible without scrolling at any of these sizes, you have a problem that is suppressing conversions right now.

The Fix: CTA Placement Rules for Mobile-First Layouts

The most reliable fix is to design the mobile layout first and enforce an above-fold CTA constraint before touching the desktop version. On mobile, the CTA should be the third element the visitor sees: headline, supporting line, button. Everything else - social proof, feature lists, hero imagery - comes after.

If a complete redesign is not immediately feasible, the sticky CTA bar pattern is the fastest fix with the highest priority. A fixed-position bar at the bottom of the mobile viewport - containing only the primary CTA button and a single line of supporting text - ensures the call to action is always visible regardless of where the visitor is on the page. This pattern consistently outperforms above-fold placement in A/B tests because it removes scroll depth as a variable entirely.

Implementation is straightforward: a fixed bottom-0 container with z-50, visible only on mobile viablock md:hidden, with enough bottom padding to clear iOS safe areas (pb-safe or an explicitpb-6). The bar should not cover content permanently - include a dismiss option or auto-hide it once the visitor reaches the page's own CTA section.

For new builds, apply a strict budget to the above-fold area at 375px: navigation ≤56px, hero section including headline and subheadline ≤320px, CTA button ≤56px. That totals 432px - well within the 580px usable viewport - leaving 148px of margin before you hit the fold. Check this budget every time you add a new element to the hero section, because padding and wrapping text will erode it faster than you expect.

Frequently asked questions

Why does my CTA look fine on my phone but not on others?

You are likely testing on a recent flagship with a tall screen. On a 375px-wide device like an iPhone SE, the same layout reflows and pushes the CTA below the fold, where visitors who never scroll will not see it.

What is the 375px problem?

375px is the CSS viewport width of the iPhone SE and many budget Android phones, one of the most common widths in mobile analytics. Layouts that work at 390px or 414px often break at 375px because text wraps and padding consumes more of the viewport.

How do I check my page right now?

Open Chrome DevTools, enable device mode, and select iPhone SE at 375 by 667 pixels. Without scrolling, check whether your CTA is fully visible. Also test at 360 by 740 and a custom 375 by 667 size.

What is the fastest fix?

A sticky CTA bar fixed to the bottom of the mobile viewport keeps the call to action visible regardless of scroll position. For new builds, budget the above-fold area so the CTA is the third element a visitor sees after the headline and supporting line.

See Where Your CTA Actually Lands

The audit flags above-fold structure issues from static HTML. Check your page, then verify on a real 375px device. Most founders find the problem in under five minutes - the fix takes longer, but knowing it exists is where it starts.

Audit Your Landing Page Free →