Most growth teams obsess over CTA copy — button color, verb choice, urgency phrasing — while ignoring the single most predictable reason a mobile hero doesn't convert: the button isn't visible when the page loads. Mobile CTA visibility at 390px is the quiet variable that controls whether a visitor even has the chance to click, yet almost nobody measures it with any precision. This post breaks down exactly why desktop-designed heroes fail on the iPhone 14 Pro's 390px viewport, the fold-boundary rule that Praxxii uses as a hard constraint on every landing page build, three sticky-CTA patterns ranked by use case, and a no-tool method for measuring fold position right now.
Why Does Mobile CTA Visibility at 390px Matter So Much?
The 390px-wide viewport (iPhone 14 Pro / 15 standard) is now the single most common screen width hitting landing pages across D2C and SaaS traffic in the US. A CTA that renders below the fold at that width is functionally invisible on the first impression — no amount of ad spend rescues a button a visitor never sees.
When you design a hero on a 1440px monitor, every spatial decision you make — logo height, headline type size, sub-headline line count, trust-badge row — gets proportionally compressed on mobile. What looks like 120px of breathing room on desktop can stack into 380px of content by the time a 390px device finishes rendering it. The CTA button bottom edge lands at, say, 680px — well below the 600px ceiling of what an iPhone user sees before scrolling.
The compounding issue: D2C brands often add a sale banner (40–50px), a sticky nav (56px), a hero image cropped for mobile (200–240px), and a two-line headline before the CTA ever appears. SaaS founders add a "No credit card required" sub-line under the button, which sounds harmless but pushes the entire block lower. None of these decisions feel consequential in Figma at 390px on a 27-inch monitor. They're devastating on an actual phone held in a hand.
What Is the 547px Fold-Boundary Rule for iPhone 14 Pro?
At 390×844 logical pixels (iPhone 14 Pro), the visible viewport with Safari's default UI chrome is roughly 600px tall. The Praxxii 547px rule sets the CTA button's bottom edge at or above 547px — leaving ~53px of margin before the fold — so the button clears the fold even when a banner or notification bar adds height.
The math is straightforward:
- Safari chrome (address bar + tab bar): ~100–120px consumed from the 844px physical viewport
- Logical visible height: ~600px
- Safe CTA bottom-edge target: ≤547px (a 53px buffer for OS notification bars, cookie banners, and chat widgets)
If you treat 600px as a hard ceiling with no buffer, a 40px cookie consent bar or a "We use push notifications" prompt will push your CTA out of view on the first load. The 547px target absorbs those runtime additions.
This constraint should be codified as a design token or a CSS custom property, not a "check at the end" QA step. Praxxii bakes it into every landing page brief before a pixel gets placed.
How to Measure Fold Position Without a Design Tool
You don't need Figma, Webflow's preview mode, or a device lab to confirm where your CTA sits. Here's a repeatable five-step method anyone on a marketing team can run in under ten minutes:
- Open Chrome DevTools on any desktop browser (F12 or Cmd+Option+I on Mac).
- Activate the Device Toolbar (Ctrl+Shift+M / Cmd+Shift+M) and set the device to "iPhone 14 Pro" — 390×844, device pixel ratio 3.
- In the Console tab, run:
document.querySelector('.your-cta-button').getBoundingClientRect().bottom— replace the selector with your actual CTA class or ID. The number returned is the pixel distance from the top of the viewport to the bottom edge of your button. - Compare to 547. If the returned value is above 547, your CTA is at risk. If it's above 600, it's invisible on load for most iPhone users.
- Repeat with the Network tab set to "Slow 3G" and the page reloaded, to catch layout shifts caused by late-loading fonts or images that push content down before the user has a chance to interact.
This five-minute audit has revealed fold failures on otherwise polished landing pages for SaaS trials, D2C subscription boxes, and service-business lead forms — pages where teams were confident the mobile experience was "fine."
Which Sticky-CTA Pattern Should You Use on Mobile?
Choose based on funnel stage and content length. A bottom-anchored bar wins for high-intent, short-form pages. A scroll-triggered floating button wins for editorial or long-form landing pages. An inline-sticky (CTA that sticks within its section as you scroll past) wins for multi-section pages where each section has a distinct offer.
Here's how the three patterns stack up in practice:
| Pattern | Best For | Risk to Avoid |
|---|---|---|
| Bottom-anchored bar | D2C product pages, SaaS free-trial CTAs, short hero + social proof layouts | Covering product imagery or pricing tables — always offset content with matching bottom padding |
| Scroll-triggered floating button | Long-form comparison pages, feature-detail pages, blog-to-product funnels | Triggering too early (before value is established) — fire at 40–60% scroll depth, not 10% |
| Inline-sticky (section-scoped) | Multi-section SaaS pricing pages, service pages with tiered offers | Complex implementation; test thoroughly on foldable devices and tablets |
A few operator-level notes:
- Bottom-anchored bars convert well for D2C when the bar includes a micro-commitment reducer: "Ships free. Cancel anytime." in 11px text below the button. The bar stays in frame; the objection handling travels with it.
- Floating buttons can hurt UX if they appear before a user has read the headline. A SaaS founder running a trial page should delay the floating CTA appearance until the user has scrolled past the feature list — not on page load.
- Inline-sticky patterns are underused on service-business pages. If you run a consulting practice with three engagement tiers, scoping the "Book a discovery call" CTA to stick only within the pricing section means the button is always visible exactly when the visitor is evaluating price — the highest-intent moment on the page.
All three patterns should be A/B tested against a static CTA, not assumed to win. Praxxii typically sees meaningful lift from sticky patterns on mobile sessions longer than 45 seconds; on short sessions, a well-placed above-fold static CTA often outperforms.
Does Page Speed Affect Where the CTA Renders on Mobile?
Yes — layout shifts caused by late-loading fonts, hero images, or third-party scripts can push a CTA below the 547px threshold after the initial paint. A button that passes your DevTools fold check can still be invisible in practice if CLS (Cumulative Layout Shift) score is above 0.1.
To control this:
- Set explicit
widthandheightattributes on all hero images so the browser reserves space before the image loads. - Use
font-display: swapwith a system-font fallback that matches the line-height of your web font as closely as possible. - Load chat widgets, cookie banners, and exit-intent scripts asynchronously or after the first user interaction.
The goal is that your CTA's pixel position at first paint matches its position after full load. If those numbers diverge by more than 20px, your CLS is working against your conversion rate.
If you're running paid traffic — Google Ads, Meta, or otherwise — PageSpeed is also directly tied to Quality Score and CPM efficiency. A page that costs you CTA visibility also costs you media efficiency. These aren't separate problems; they're the same problem measured at different layers. Praxxii's performance marketing work at /services frequently starts with a technical landing-page audit before a single ad dollar is reviewed.
FAQ
What viewport width should I use to test mobile CTA visibility? Start with 390px (iPhone 14 Pro / iPhone 15 standard). It represents the most common screen width across US mobile traffic. Also test at 375px (older iPhones) and 412px (popular Android devices like the Pixel 7). If your CTA clears 547px at 390px, it will typically pass at 375px too — but verify.
How do I fix a CTA that lands below the fold without redesigning the whole hero? The fastest interventions: reduce headline to a single line (max two), remove the sub-headline or move it below the CTA, reduce the hero image height from auto to a fixed 180–200px on mobile, and cut trust-badge rows to a single line. These changes alone typically recover 80–140px of vertical space.
Should sticky CTAs be used on every mobile landing page? No. On very short pages — above-fold hero, two social-proof elements, and a form — a sticky CTA adds visual noise without benefit. Reserve sticky patterns for pages where meaningful scroll depth is expected before a visitor is ready to convert.
How does this connect to paid media performance? Directly. If your CTA is below the fold on mobile, bounce rates rise, time-on-page drops, and conversion events don't fire — all of which degrade your Google Ads or Meta campaign's optimization signals. The algorithm optimizes toward users who convert; a broken mobile fold starves the algorithm of those signals. Learn how Praxxii approaches this holistically at /services or see /pricing for engagement options.
Where do I start if I want Praxxii to audit my landing pages? Reach out at /contact. A fold-visibility audit is typically one of the first deliverables in a new engagement — it's fast, specific, and usually surfaces three to five fixable issues within the first week.