Your cookie banner might be covering your contact button

Most people landing on your site from an ad aren't using Chrome or Safari: they come through the browser built into Instagram or Facebook. And that browser keeps part of the screen: its top and bottom bars eat around 180 pixels.

An iPhone that on paper is 844 pixels tall ends up with roughly 660 real ones.

Why it matters

A cookie banner easily takes 200 to 250 pixels. If your contact button falls inside that strip, it cannot be tapped until the visitor decides about cookies. Someone who just clicked your ad runs into paperwork before they can message you.

The way to check isn't to look at the screen, it's to ask the browser:

const button = document.querySelector('.my-button');
const r = button.getBoundingClientRect();
// What element is ACTUALLY at the centre of the button?
document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);

If that returns part of the banner instead of your button, the button doesn't exist as far as the user is concerned.

Three mistakes we see often

• Measuring width instead of height. The problem isn't a narrow screen, it's a short one. A @media (max-height: 720px) targets the Instagram browser exactly, without touching taller phones.
• Fixed containers stretched edge to edge. A floating bubble anchored with left: 12px; right: 12px spans the full width even if the icon sits on the right, and swallows every tap in that strip. Fix it with pointer-events: none on the container and auto on its children.
• Headlines that never shrink. A clamp(3rem, 8.4vw, 6.2rem) looks responsive, but below a certain width the minimum always wins: the headline takes up the same space on a large phone as on a small one.

What you should not do

Hiding the reject button, making it harder to tap than accept, or forcing acceptance to continue. Beyond being fined in Spain, it isn't necessary: the answer is to fit both, not to remove one.

In our case it was enough to tighten the dead space in the header and keep the direct WhatsApp link above the banner. The legal text stayed exactly as it was, and rejecting is still one tap away.

How to check your own site

1. Open your site on your phone from the ad, not by typing the address.
2. See whether the main button is visible without scrolling.
3. Try tapping it while the banner is open.

If you can't, every euro you spend driving people there is paying for a dead end.