WordPress button not working on mobile

A WordPress button that works on desktop but ignores taps on a phone is usually covered by something you cannot see: a container, spacer, negative-margin section, sticky header or chat widget that overlaps it only at mobile widths. Inspect the button in Chrome’s device mode; if a different element highlights, that layer is catching the tap. Less often a script cancels the tap or the button’s link is empty on the mobile version.

What you'll see

A call-to-action or link works on a laptop and even looks fine in the Elementor or block editor mobile preview, but tapping it on a real phone does nothing. Sometimes only the top half of the button responds, or it starts working once you scroll a little.

Why it happens

1. An invisible layer sits over the button

A transparent container, an empty column with a min-height, a section pulled up with a negative margin, or a sticky header can overlap the button at phone widths. The tap lands on that layer, which has no link.

2. Mobile-only styles move things around

Absolute positioning, transforms or custom offsets applied only at the mobile breakpoint can slide a decorative shape or background element over the content beneath it.

3. A script swallows the tap

Smooth-scroll, analytics or popup scripts sometimes attach a click handler that calls preventDefault on links, so the browser never follows the link even though the button is on top.

4. The link is empty at that breakpoint

Some layouts duplicate a section for mobile and hide the desktop one. If the mobile copy was never given a URL, or still has #, the button looks right but goes nowhere.

How to fix it

Open the page in Chrome, press F12, switch on device mode (the phone icon) at about 390px, then right-click the button and choose Inspect. If DevTools highlights something other than the button or its link, that element is on top.
For a precise answer, hover the button to get its position and run document.elementFromPoint(x, y) in the Console with those coordinates. It returns whatever element actually receives a tap there.
Fix the overlapping element: remove the negative margin, reduce the min-height of the empty column, add pointer-events: none to purely decorative layers, or set a higher z-index on the section that holds the button.
In the editor, switch to the mobile breakpoint, select the button and check its Link field and any responsive visibility settings, so the visible version has the real URL.
If nothing overlaps, watch the Console and temporarily disable smooth-scroll or tracking plugins with Health Check & Troubleshooting to see if the tap starts working.
Retest on iOS Safari and Android Chrome, since sticky headers and chat bubbles sit in slightly different places on each.

How to check it's fixed

Tap every primary call-to-action at 360px, 390px and 414px widths; each should navigate or open what it promises.
Repeat with the page scrolled so the sticky header and any chat bubble are over the button area.

What a QAlaunch scan shows for this

Clicking the primary call-to-action at desktop and phone widths and reporting when it is unreachable or leads nowhere.
Phone screenshots with a visual review that points out overlapping or hidden elements.
Tap targets that are too small or crammed together, plus phone and email links that cannot be tapped.
Console errors from scripts that may be intercepting clicks.

See exactly what a full report contains in the sample report.

Frequently asked questions

Why does the editor’s mobile preview work but my phone does not?

The editor preview is a resized desktop browser using a mouse, and often skips sticky headers, chat widgets and optimisation plugins. A real phone gets all of them, which is where the overlap appears.

Is raising the z-index always the right fix?

It works, but it treats the symptom. If an empty container or a negative margin is the real cause, fixing that keeps the layout clean and stops the same problem returning on the next button.

Could my caching plugin cause this?

Yes, when the button depends on JavaScript, such as one that opens a popup or scrolls to a section. Delayed or combined scripts can leave it inactive until a second tap. Test with ?nocache=1 to rule it out.

Done for you · not automated

Rather have a QA engineer test it by hand?

If this is a site you're launching or handing to a client, I'll go through it by hand, including the WordPress-specific issues a scan can't reach, like logged-in flows.

$299one-time · 3 business days

Up to 10 key pages tested by hand, not a scan
Every flow a customer uses: forms, sign-up, checkout, booking
Real mobile and desktop browsers
A written report in plain language, with screenshots
A 15-minute call to walk you through it
10 years of professional QA experience

Tell me about your site and I'll reply personally, usually the same day.

No payment now. I'll confirm scope and price first.

Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.

Sources: WordPress.org Elementor forum: button not working in mobile view · GeneratePress forum: mobile taps failing with optimisation